此页面由 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 Scroll Snap 实现精细控制的滚动！

刘海屏（又称缺口）

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

越来越多的移动设备发布时带有刘海屏（有时称为凹口）。为了解决这个问题，浏览器会在网页上添加一些额外的边距，以免内容被刘海遮挡。

但如果您想使用该空间，该怎么办？

借助 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 新鲜事》28 集视频的人员。这些人都很棒！

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 开发者 YouTube 频道，这样每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage，Chrome 70 发布后，我会立即在此向您介绍 Chrome 中的新变化！