此页面由 Cloud Translation API 翻译。

Chrome 69 的新功能

Pete LePage

距离 Chrome 首次发布已经过去了 10 年。自那时起，很多事情都发生了变化，但我们为现代 Web 应用奠定坚实基础的目标始终如一！

在 Chrome 69 中，我们添加了对以下内容的支持：

借助 CSS 滚动贴靠，您可以打造流畅、顺滑的滚动体验。
借助刘海屏，您可以使用屏幕的整个区域，包括刘海屏（有时也称为缺口）后面的所有空间。
借助 Web Locks API，您可以异步获取锁，在执行工作时将其保持，然后释放它。

还有更多功能！

我是 Pete LePage。我们来深入了解一下 Chrome 69 中面向开发者的新功能！

想要查看完整的变更列表？查看 Chromium 源代码库更改列表。

CSS 滚动捕获

观看演示 | 来源

借助 CSS 滚动贴靠，您可以声明滚动贴靠位置，以告知浏览器在每次滚动操作后停止的位置，从而打造流畅、顺滑的滚动体验。这对于您希望用户滚动到特定点的图片轮播界面或分页部分非常有用。

对于图片轮播界面，我会向滚动容器添加 scroll-snap-type: x mandatory;，并向每张图片添加 scroll-snap-align: center;。然后，当用户滚动浏览轮播界面时，每张图片都会平稳地滚动到最佳位置。

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

CSS 滚动吸附功能非常有效，即使吸附目标的大小不同或大于滚动条，也能正常运行！如需了解详情和可供尝试的示例，请参阅使用 CSS 滚动捕获精确控制滚动一文！

刘海屏（也称为凹口）

带刘海屏的手机 — 浏览器会在带刘海屏的移动设备上添加一些额外的边距，以防止内容被刘海屏遮挡。

越来越多的移动设备发布时都带有显示屏缺口（有时也称为刘海屏）。为解决此问题，浏览器会在您的网页中添加一些额外的边距，以免内容被缺口遮挡。

但如果您想使用以下空间呢？

现在，借助 CSS 环境变量和 viewport-fit 元标记即可实现。例如，如需指示浏览器扩展到显示屏切口区域，请将 viewport 元标记中的 viewport-fit 属性设置为 cover。

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

然后，您可以使用 safe-area-inset-* CSS 环境变量来排版内容。

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

WebKit 博客上有一篇关于为 iPhone X 设计网站的优质博文，您也可以参阅说明文档了解详情。

Web Locks API

借助 Web Locks API，您可以异步获取锁，在执行工作时保持锁定状态，然后释放锁。在锁定期间，源中的任何其他脚本都无法获取相同的锁，这有助于协调共享资源的使用。

例如，如果在多个标签页中运行的 Web 应用想要确保只有一个标签页同步到网络，则同步代码会尝试获取名为 network_sync_lock 的锁。

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

获取锁定的第一个标签页将数据同步到网络。如果其他标签页尝试获取相同的锁，系统会将该锁加入队列。释放锁定后，队列中的下一个请求将获得锁定，并执行。

MDN 有一篇非常实用的 Web Locks 入门指南，其中包含更深入的解释和大量示例。或者，您也可以深入了解并查看规范。

等等！

当然，这只是 Chrome 69 中面向开发者的部分变更，还有许多其他变更。

圆锥梯度

根据 CSS4 规范，您现在可以使用圆锥形渐变在圆形周围创建颜色过渡。Lea Verou 提供了一个可供您使用的 CSS conic-gradient() polyfill，该页面还包含社区提交的许多非常酷的示例。
元素上新增了 toggleAttribute() 方法，用于切换属性的存在性，类似于 classList.toggle()。
JavaScript 数组将获得两个新方法：flat() 和 flatMap()。它们会返回一个新数组，其中包含所有嵌套数组元素。
OffscreenCanvas 会将工作从主线程移至工作器，有助于消除性能瓶颈。

有趣的彩蛋对话

您找到了视频中的所有彩蛋了吗？

Chrome 漫画
Chromercise 健身带
土豆炮
Pete Monster
2017 年 CDS 大会的木制恐龙

特别感谢所有帮助我们制作 28 集“Chrome 新变化”视频的人员。他们每个人都很棒！

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

想了解“Chrome 新变化”自第一集播出以来取得了怎样的进展？请观看这段时长 30 秒的趣味进展视频，了解我们从首个视频发布到现在的历史轨迹！

当然，也非常感谢您观看并提供意见和反馈！我已阅读所有这些信息，并会认真考虑您的建议。这些视频在您的帮助下变得更加出色！

谢谢观看！

Chrome 失误集锦中的新内容

我们精心制作了一个有趣的小视频，供您欣赏！看完后，我了解到了一些东西：

当我口误时，会发出一些奇怪的声音。
我会做鬼脸和吐舌头。
我会摇晃，而且摇晃很多。

如需及时了解我们的最新视频，请订阅我们的 Chrome Developers YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，待 Chrome 70 发布后我会立即向大家介绍 Chrome 的新变化！