5 月新增 Web 平台

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

Rachel Andrew

稳定的浏览器版本

5 月，Chrome 102、Safari 15.5、Firefox 100 和 Firefox 101 成为稳定版。

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

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

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

Chrome 102 推出了 Navigation API，该 API 可标准化单页应用中的客户端路由。此 API 之前称为“应用历史记录 API”。

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: not supported.
  • Safari: not supported.

Source

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

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Source

Firefox 101 还引入了 prefers-contrast 媒体功能，使此功能可在多个浏览器中使用。

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: 101.
  • Safari: 14.1.

Source

Beta 版浏览器

Beta 版浏览器可让您抢先体验下一个稳定版浏览器中的功能。在面向全球发布该版本之前，您可以趁此机会测试可能会影响您网站的新功能或移除的功能。

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

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

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

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Source

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

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

修改：此帖子的先前版本提及了 Element.isVisible() 方法，但此方法并未在此版本中发布。

网络新手系列的一部分