Chrome 65 的新功能

Pete LePage

还有更多精彩！

我是 Pete LePage。让我们深入了解一下 Chrome 65 为开发者带来了哪些新功能！

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

CSS Paint API

CSS Paint API 允许您以编程方式为 background-image 或 border-image 等 CSS 属性生成图片。

您可以使用新的绘制函数来绘制图片（非常类似于画布元素），而不是引用图片。

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js<');>
/script

例如，您可以使用 Paint API，而不是添加额外的 DOM 元素来在 Material 样式按钮上创建涟漪效果。

它也是一种强大的方法，可用于对浏览器尚不支持的 CSS 功能进行 polyfill。

Surma 在其说明中发布了一篇精彩博文，其中包含多个演示。

Server Timing API

希望您正在使用 Navigation Timing API 和 Resource Timing API 来跟踪网站在真实用户端的性能。到目前为止，服务器还没有一种简单的方法来报告其性能计时。

借助新的 Server Timing API，您的服务器可以将计时信息传递给浏览器，让您更好地了解整体性能。

您可以通过在响应中添加 Server-Timing 标头，跟踪任意数量的指标：数据库读取时间、启动时间或对您而言重要的任何指标：

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

这些信息会显示在 Chrome 开发者工具中，您也可以从响应标头中提取这些信息，并将其与其他性能分析数据一起保存。


display: contents

新的 CSS display: contents 属性非常棒！

添加到容器元素后，任何子元素都会在 DOM 中取代其位置，而它基本上会消失。假设我有两个 div，一个在另一个内部。我的外部 div 具有红色边框、灰色背景，并且我已将宽度设置为 200 像素。内部 div 具有蓝色边框和浅蓝色背景。

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

默认情况下，内部 div 包含在外部 div 中。

I'm the inner <div>

将 display: contents 添加到外部 div 后，外部 div 会消失，其限制条件也不再应用于内部 div。内部 div 现在宽度为 100%。

使用开发者工具检查 DOM，您会发现外部 div 仍然存在。

在很多情况下，这可能会很有用，但最常见的情况是使用 flexbox。使用 flexbox 时，只有 flex 容器的直接子级才会成为 flex 项。

但是，一旦您将 display: contents 应用于子项，其子项就会变为 flex 项，并使用本应应用于其父项的相同规则进行布局。

如需了解更多详情和其他示例，请参阅 Rachel Andrew 的精彩博文使用 display contents 隐藏盒子。

以及更多！

这些只是 Chrome 65 中面向开发者的一些变化，当然，还有更多变化。

  • 用于为 color 属性指定 HSL 和 HSLA 以及 RGB 和 RGBA 坐标的语法现在符合 CSS Color 4 规范。
  • 现在，您可以通过一项新的功能政策，使用 HTTP 标头或 iframe allow 属性来控制同步 XHR。

请务必查看 Chrome 开发者工具的新变化，了解 Chrome 65 中开发者工具的新变化。如果您对渐进式 Web 应用感兴趣，请观看新的 PWA 路演视频系列。 然后，点击我们 YouTube 频道上的订阅按钮，这样，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage，Chrome 66 一经发布，我就会在这里为您介绍 Chrome 中的新变化！