此页面由 Cloud Translation API 翻译。

Chrome 69 的新功能

Pete LePage

距离 Chrome 首次发布已经十年了。自那时起，很多事情都发生了变化，但我们为现代 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 锁定入门文章，其中包含更深入的说明和大量示例。或者，您也可以深入了解并查看规范。

等等！

当然，这只是 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 中的新变化！