此页面由 Cloud Translation API 翻译。

5 月新增 Web 平台

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

Rachel Andrew

稳定版浏览器

5 月，Chrome 102、Safari 15.5、Firefox 100 和 Firefox 101 均已稳定发布。

Chrome 102 和 Safari 15.5 包含 inert 属性。这会从标签页顺序和无障碍功能树中移除非交互式元素。例如，当前在屏幕外或处于隐藏状态的元素。

浏览器支持

来源

Chrome 102 为 HTML hidden 属性添加了新值 until-found。这样，您就可以在页面收起区域内的文本上执行页面内查找和滚动到文本片段操作，例如在手风琴模式中。如需了解详情，请参阅使用 hidden=until-found 使收起的内容可访问一文。

浏览器支持

来源

Chrome 102 提供了 Navigation API，该 API 用于标准化单页应用中的客户端路由。此 API 以前称为 App History API。

浏览器支持

来源

Firefox 101 支持可构造的样式表。支持包括 CSSStyleSheet() 构造函数以及 replace() 和 replaceSync() 方法。通过可构造的样式表，您可以更轻松地创建要与 Shadow DOM 搭配使用的样式表。在以下示例中，使用 CSSStyleSheet() 构造函数创建了样式表，使用 replaceSync() 方法添加了 CSS 规则，并将生成的规则输出到控制台。

const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);

浏览器支持

来源

Firefox 101 中还新增了 prefers-contrast 媒体功能，使其可在多种浏览器中使用。

浏览器支持

来源

Beta 版浏览器

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

4 月份推出了 Chrome 103 和 Firefox 102 这两个新 Beta 版。

Firefox 102 包含 update 媒体功能。用于查询输出设备是否可以在内容呈现后修改其外观。它接受以下值：

none: 内容呈现后，便无法再更新。例如，打印的文件。
slow: 设备可以更新内容，但速度太慢，无法显示流畅的动画。例如，电子墨水屏幕。
fast: 内容可以动态更改，并且速度足够快，可以渲染动画。例如，计算机或手机屏幕。

浏览器支持

来源

Chrome 103 包含 Local Font Access API，可访问用户本地安装的字体。

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

修改：这篇文章的先前版本提到了 Element.isVisible() 方法，但此方法未包含在此版本中。

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