探索 2022 年 3 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。
浏览器稳定版
3 月,Chrome 99、Chrome 100、Firefox 98 和 Safari 15.4 成为稳定版。这为平台带来了一批新功能,其中许多新增功能都意味着该功能可用于所有三种浏览器引擎。在这篇博文中,我重点介绍了那些可以跨浏览器实现互操作性的新增功能。不过,请务必查看版本说明,了解添加到每个引擎的所有功能。
Chrome 99 和 Safari 15.4 包含级联层。@layer
at-rule 定义了一个级联层,可帮助您控制特异性。由于这些浏览器加入了 Firefox,级联层现在可用于所有三种浏览器引擎。请参阅您的浏览器即将推出级联层,详细了解级联层。
Chrome 100 为 CSS mix-blend-mode 属性添加了新值 plus-lighter
。当所有或部分像素具有相同的值时,当两个元素交替淡出时,此值非常有用。您可以参阅当前不可能交叉淡入淡出任何两个 DOM 元素,详细了解此方法可以解决的问题。
浏览器支持
- 100
- 100
- 99
- 9.1
Safari 15.4 包含 contain
属性,允许 CSS 包含。
Safari 15.4 中还有 accent-color
,可用于控制在某些表单控件中使用的强调色。
Firefox 98 和 Safari 15.4 添加了 <dialog>
元素,代表一个对话框。
Safari 15.4 也已完成对 :focus-visible
伪类的支持。这方面的实施工作由 Igalia 完成。
Beta 版浏览器版本
通过 Beta 版浏览器,您可以预览浏览器下一个稳定版本的新功能。不妨趁此时机测试一下新功能或内容移除,这些新功能或内容可能会在全球发布之前对您的网站产生影响。
3 月份的新 Beta 版是 Chrome 101 和 Firefox 99。
Chrome 101 Beta 版包含 hwb 颜色表示法。此参数根据色调、白度和黑度指定颜色。与其他颜色表示法一样,可选的 Alpha 分量可指定不透明度。
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
Firefox 99 包含导航器界面的 pdfViewerEnabled
属性。此属性指示浏览器是否支持以内嵌方式显示 PDF 文件。
if (!navigator.pdfViewerEnabled) {
// The browser does not support inline viewing of PDF files.
}
这些 Beta 版功能很快就会在稳定版浏览器中推出。
“网络新体验”系列视频的一部分