Chrome 65 的新功能

Pete LePage

还有许多其他功能！

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

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

CSS Paint API

借助 CSS Paint API，您可以 以编程方式为 background-image 等 CSS 属性生成图片 或 border-image。

您无需引用图片，可以使用新的绘制函数 绘制图像 - 很像画布元素。

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

例如，您不必将额外的 DOM 元素添加到 创建涟漪效果 ，那么您可以使用 Paint API。

这也是一种对不受支持的 CSS 功能执行 polyfill 操作的有效方法 。

Surma 发表了一篇精彩的帖子， 演示 在说明中说明。

Server Timing API

希望您使用导航和资源计时 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 中。

我是内心的 <div>

向外部 div 添加 display: contents，会使外部 div 消失 及其约束条件不再应用于内部 div。内部 div 现在为 100% 宽度。

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

这项功能在很多情况下可能很有用，但最常见的情况是 就使用 Flexbox使用 Flexbox 时，只有 Flex 容器的直接子项 会成为 Flex 项。

但是，一旦您将 display: contents 应用于子元素，其子元素就会变得灵活 应用的布局规则 其家长所共享的数据。

查看 Rachel Andrew 的精彩帖子 陈列着展示内容的箱子 了解详情和其他示例。

等等！

Chrome 65 中面向开发者的改进只是冰山一角， 还有很多其他功能。

  • 用于指定 HSL 和 HSLA 以及 RGB 和 RGBA 坐标的语法 指定颜色属性 匹配 CSS 颜色 4 规范。
  • 新增了一项功能政策 您可通过 HTTP 标头或 iframe allow 属性。

请务必查看 Chrome 开发者工具中的新功能。 了解 Chrome 65 中开发者工具的新变化。而且，如果您对 渐进式 Web 应用 “PWA Roadshow”视频系列。 然后，点击页面上的订阅按钮 YouTube 频道和 每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage，Chrome 66 发布后， 和您分享 Chrome 的新功能！