探索 2022 年 5 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。
浏览器稳定版
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 月份的新 Beta 版是 Chrome 103 和 Firefox 102。
Firefox 102 包含 update
媒体功能。用于查询输出设备是否可以修改内容渲染后的外观。它接受以下值:
none
- 内容一经呈现便无法更新。例如,打印的文档。
slow
- 设备可以更新内容,但速度太慢,无法播放流畅的动画。例如,E-ink 屏幕。
fast
- 内容可以动态变化,并且足够快的速度渲染动画。例如,计算机或手机屏幕。
Chrome 103 包含 Local Font Access API,该 API 允许访问用户本地安装的字体。
这些 Beta 版功能很快就会在稳定版浏览器中推出。
修改:此帖子的一个先前版本提及了 Element.isVisible()
方法,但此版本并未提供该方法。
“网络新体验”系列视频的一部分