此页面由 Cloud Translation API 翻译。

2 月份新增 Web 平台

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

Rachel Andrew

稳定版浏览器

2 月，Chrome 98 和 Firefox 97 均已发布稳定版。

Chrome 98 支持 self.structuredClone 方法。它使用结构化克隆算法创建值的深层克隆。详细了解 structuredClone()。

浏览器支持

Firefox 97 包含级联层。@layer @ 规则定义了一个级联层，可帮助您控制特异性。

@layer framework {
  /* creates a new layer named framework */
}

Firefox 是第一个在正式版中实现此功能的浏览器。不过，请查看本文中有关Beta 版的部分，因为不久之后，此功能将面向全球推出。如需详细了解级联层，请参阅级联层即将在您的浏览器中推出。

浏览器支持

Firefox 还会使用 scrollbar-gutter 属性。此属性有助于消除随着内容增多而出现滚动条所导致的布局偏移。

滚动条边线是指内边框边缘和外边距边缘之间的间距。滚动条（如果需要）将显示在此处。如果没有滚动条，边线会显示为内边距的延伸。以下 CSS 会根据框两侧的滚动条尺寸添加间距，以保持外观对称。

.container {
  scrollbar-gutter: stable both-edges;
}

浏览器支持

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

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

通过浏览器 Beta 版，您可以抢先体验即将推出的浏览器稳定版中提供的功能。在全球用户获得该版本之前，您可以先测试可能会影响您网站的新功能或移除的功能。

2 月推出了 Chrome 99 和 Firefox 98 这两个新 Beta 版。Safari Beta 版 15.4 仍在开发中，我上个月介绍了其中的一些内容。

Chrome 99 包含层叠叠加层，Safari Beta 15.4 中也包含层叠叠加层，因此我们预计很快就会在所有常青浏览器中看到此功能。

此外，Chrome 99 中还新增了 CanvasRenderingContext2D 的几个属性，并在 HTMLInputElement 中新增了 showPicker() 方法，用于显示日期、时间、颜色和文件的浏览器选择器。

在 Firefox 98 中，您会看到 <dialog> 元素。当 Firefox 和 Safari Beta 版变为稳定版后，所有长期支持的浏览器都将支持此功能。

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