网站平台将于 3 月推出

了解 2022 年 3 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。

Rachel Andrew

稳定版浏览器

3 月份，Chrome 99、Chrome 100、Firefox 98 和 Safari 15.4 均已发布稳定版。这为该平台带来了一系列新功能，其中许多功能都意味着该功能在所有三个浏览器引擎中都适用。在本文中，我重点介绍了这些新增功能，它们使我们能够实现跨浏览器互操作性。不过，请查看版本说明，了解为每个引擎添加的所有功能。

注意：Chrome 已发布到 100 版，我们回顾了过去 14 年间发生的一些有趣、酷炫和有意义的事情。欢迎查看 #100CoolWebMoments。

Chrome 99 和 Safari 15.4 包含级联层。@layer @ 规则定义了一个级联层，可帮助您控制特异性。它们与 Firefox 一同支持 CSS 层叠叠加，因此这三种浏览器引擎现在都支持 CSS 层叠叠加。如需详细了解级联层，请参阅级联层即将在您的浏览器中推出。

浏览器支持

• 99
• 99
• 97
• 15.4

来源

Chrome 100 为 CSS mix-blend-mode 属性添加了 plus-lighter 这一新值。当所有或部分像素具有相同值时，此值在对两个元素进行交叉淡出时非常有用。如需详细了解此方法解决的问题，请参阅目前无法对任何两个 DOM 元素进行交叉淡出。

浏览器支持

• 100
• 100
• 99
• 9.1

Safari 15.4 包含 contain 属性，支持 CSS 容器。

浏览器支持

• 52
• 79
• 69
• 15.4

来源

Safari 15.4 中还新增了 accent-color，可用于控制某些表单控件使用的强调色。

浏览器支持

• 93
• 93
• 92
• 15.4

来源

Firefox 98 和 Safari 15.4 引入了 <dialog> 元素，该元素表示对话框。

浏览器支持

• 37
• 79
• 98
• 15.4

来源

Safari 15.4 还完成了对 :focus-visible 伪类的支持。此功能的实现工作由 Igalia 完成。

浏览器支持

• 86
• 86
• 85
• 15.4

来源

Beta 版浏览器

通过浏览器 Beta 版，您可以抢先体验即将推出的浏览器稳定版中提供的功能。在面向所有用户发布新版本之前，测试可能会对您的网站产生影响的新功能（或内容移除情况），这无疑是一个好时机。

3 月份推出了 Chrome 101 和 Firefox 99 这两个新 Beta 版。

Chrome 101 Beta 版包含 hwb 颜色标记。此属性根据色相、白度和黑度来指定颜色。与其他颜色表示法一样，可选的 Alpha 组件用于指定不透明度。

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

浏览器支持

• 101
• 101
• 96
• 15

来源

Firefox 99 包含 Navigator 接口的 pdfViewerEnabled 属性。此属性指示浏览器是否支持内嵌显示 PDF 文件。

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

浏览器支持

• 94
• 94
• 99
• 16.4

来源

这些 Beta 版功能很快就会在稳定版浏览器中推出。

网络新书系列