- 借助 CSS Paint API,您可以编程方式生成图片。
- Server Timing API 允许 Web 服务器通过 HTTP 标头提供性能计时信息。
- 新的 CSS
display: contents
属性可以使方框消失!
以及更多功能!
我是 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 操作的有效方法。
Server Timing API
希望您在使用 Navigation 和 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
中。
将 display: contents
添加到外部 div 会隐藏外部 div
,并且其约束条件不再应用于内部 div
。内部 div
现在的宽度为 100%。
div
仍然存在。这在很多情况下可能很有用,但最常见的情况是使用 Flexbox。使用 Flexbox 时,只有 Flex 容器的直接子项会变为 Flex 项。
但是,将 display: contents
应用于子项后,其子项就会变成弹性项,并且布局使用的规则与应用于其父项的规则相同。
如需了解更多详情和其他示例,请查看 Rachel Andrew 的精彩博文 Vanishing box with display content。
还有更多其他奖励!
以上只是我们针对开发者在 Chrome 65 中做出的一些改动,当然还有很多其他变化。
- 现在,用于指定颜色属性的
HSL
和HSLA
以及RGB
和RGBA
坐标的语法与 CSS 颜色 4 规范匹配。 - 新增了一项功能政策,允许您通过 HTTP 标头或 iframe
allow
属性来控制同步 XHR。
请务必查看 Chrome 开发者工具中的新功能,了解 Chrome 65 中开发者工具的新变化。如果您对渐进式 Web 应用感兴趣,请观看新的 PWA 路演视频系列。然后,点击 YouTube 频道上的订阅按钮,每当我们发布新视频时,您都会收到电子邮件通知。
我叫 Pete LePage