Chrome 69 的新功能

皮特·莱佩奇

自 Chrome 首次推出以来，已经十年了。此后很多地方都发生了变化，但我们的目标却没有，为现代 Web 应用打下坚实的基础！

在 Chrome 69 中，我们新增了对以下功能的支持：

  • 借助 CSS Scroll Snap，您可以打造流畅、流畅的滚动体验。
  • 借助刘海屏，您可以利用整个屏幕区域，包括刘海屏后面的任何空间（有时称为凹口）。
  • 借助 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 入门指南，其中包括更深入的说明和大量示例。您也可以深入了解相关内容并查看spec。

还有更多其他奖励！

以上只是我们针对开发者在 Chrome 69 中所做的更改中的一小部分，当然还有许多其他变化。

圆锥渐变

  • 根据 CSS4 规范，您现在可以使用圆锥渐变围绕圆形的圆周创建颜色过渡效果。Lea Verou 有一个 CSS conic-gradient() polyfill 可供您使用，并且该页面包含大量由社区提交且非常酷的示例。
  • 针对元素有一个新的 toggleAttribute() 方法可以切换属性是否存在，类似于 classList.toggle()。
  • JavaScript 数组正在获取两种新方法：flat() 和 flatMap()。它们会返回一个新数组，其中的所有子数组元素都被平滑地插入其中。
  • OffscreenCanvas 会将主线程以外的工作转移到工作器，帮助消除性能瓶颈。

有趣的彩蛋对话

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

特别感谢所有帮助制作 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 Bloopers（搞笑花絮）的新变化

我们整理了一个有趣的小花絮带你欣赏！观看该视频后，我学到了以下几点：

  • 当我说话时，我会发出一些奇怪的声音。
  • 我会做脸，吐舌头。
  • 我经常摇摆。

订阅

如果您想及时了解我们视频的最新动态，请订阅我们的 Chrome Developers YouTube 频道。每当我们发布新视频时，您都会收到电子邮件通知。

我叫 Pete LePage