网站平台于 1 月推出

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

Rachel Andrew

稳定版浏览器

1 月，Chrome 97 和 Firefox 96 正式发布。

Firefox 96 中提供了颜色函数 hwb()。此函数通过色调、白度和黑度来表示颜色。

浏览器支持

  • Chrome：101.
  • Edge：101。
  • Firefox：96.
  • Safari：15.

来源

Firefox 96 中还新增了 CSS color-scheme 属性。借助此属性，您可以指明元素可采用的配色方案。例如，如需指明 .widget 可在操作系统的浅色或深色模式下呈现，请使用以下 CSS。

.widget {
  color-scheme: light dark;
}

随着 color-scheme 在 Firefox 中发布，这意味着该属性在 Chrome、Firefox 和 Safari 中均可用。

浏览器支持

  • Chrome：81。
  • Edge：81。
  • Firefox：96.
  • Safari：13.

来源

Beta 版浏览器

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

1 月份的 Beta 版为 Chrome 98、Firefox 97 和 Safari 15.4 Beta 版 1。

Chrome 98 支持 COLRv1 彩色渐变矢量字体，作为额外的新字体格式。彩色字体包含多种颜色的字符，例如表情符号、国家/地区旗帜或彩色字母。

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

此外，还包含用于对对象进行深层复制的 structuredClone() 方法，以及 CSS 媒体查询 dynamic-range 和 video-dynamic-range。如需了解更多可供测试的功能，请参阅 Chrome 98 Beta 版博文。

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

Firefox 97 Beta 版支持 length 的 cap 和 ic 单位，还实现了 scrollbar-gutter 属性。

Safari 15.4 Beta 版包含一系列实用功能。功能包括实现 ::backdrop 伪元素、:focus-visible 伪类、accent-color 属性，以及通过 contain 属性实现 CSS 容器。此 Beta 版还包含 HTML <dialog> 元素、用于启用延迟加载的图片上的 lazy 属性，以及对 Web 应用清单图标的支持。

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

“新手入门 Web 系列”的一部分