此页面由 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 属性。这会从标签页顺序和无障碍功能树中移除非互动元素。例如，当前在屏幕之外或隐藏的元素。

浏览器支持

102
102
112
15.5

来源

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);

浏览器支持

73
79
101
16.4

来源

此外，Firefox 101 中还提供了 prefers-contrast 媒体功能，让您可以跨浏览器使用此功能。

浏览器支持

96
96
101
14.1

来源

Beta 版浏览器版本

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

4 月份的新 Beta 版是 Chrome 103 和 Firefox 102。

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

none: 内容一经呈现便无法更新。例如，打印的文档。
slow: 设备可以更新内容，但速度太慢，无法播放流畅的动画。例如，E-ink 屏幕。
fast: 内容可以动态变化，并且足够快的速度渲染动画。例如，计算机或手机屏幕。

浏览器支持

来源

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

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

修改：此帖子的一个先前版本提及了 Element.isVisible() 方法，但此版本并未提供该方法。

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