网站平台于 1 月推出

探索 2022 年 1 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。

浏览器稳定版

Chrome 97 和 Firefox 96 已于 1 月加入稳定版。

Firefox 96 提供了颜色函数 hwb()。此函数用于按色调、白度和黑度表示颜色。

浏览器支持

  • 101
  • 101
  • 96
  • 15

来源

Firefox 96 中还包含 CSS color-scheme 属性。通过此属性,您可以指明元素可以采用哪些配色方案。例如,如需指明 .widget 可以在操作系统的浅色模式或深色模式下呈现,请使用以下 CSS。

.widget {
  color-scheme: light dark;
}

在 Firefox 中采用配色方案时,这意味着在 Chrome、Firefox 和 Safari 中可以使用该属性。

浏览器支持

  • 81
  • 81
  • 96
  • 13

来源

Beta 版浏览器版本

通过 Beta 版浏览器,您可以预览浏览器下一个稳定版本的新功能。不妨趁此时机测试一下新功能或内容移除,这些新功能或内容可能会在全球发布之前对您的网站产生影响。

1 月份的 Beta 版包括 Chrome 98Firefox 97 和 Safari 15.4 Beta 1。

Chrome 98 支持 COLRv1 彩色渐变矢量字体作为一种额外的新字体格式。彩色字体包含有多种颜色的字形,例如表情符号、国旗或彩色字母。

请参阅 Chrome 98 中的 COLRv1 颜色渐变矢量字体,详细了解这种新字体格式。

此外,还包含用于创建对象的深层副本的 structuredClone() 方法以及 CSS 媒体查询 dynamic-rangevideo-dynamic-range。要了解更多可测试功能,请参阅 Chrome 98 Beta 版博文

Chrome 98 开发者工具提供了一系列新功能,包括新的完整无障碍树

对于 length,Firefox 97 Beta 版支持 capic 单位,并且还实现了 scrollbar-gutter 属性。

Safari 15.4 Beta 版中提供了各种优质功能。功能包括 ::backdrop 伪元素、:focus-visible 伪类、accent-color 属性和 CSS Containment 属性的实现(包含 contain 属性)。此 Beta 版还包含 HTML <dialog> 元素(图片上用于启用延迟加载lazy 属性),并且支持 Web 应用清单图标。

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

“网络新体验”系列视频的一部分