4 月新增 Web 平台

探索 2022 年 4 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。

浏览器稳定版

4 月,Chrome 101 和 Firefox 99 推出了稳定版。在上个月的导视广告系列发布之后,4 月份的平静程度略有下降,但还是有一些有趣的变化可供我们使用。

Chrome 101 包含 hwb 颜色表示法。此参数根据色调、白度和黑度指定颜色。与其他颜色表示法一样,可选的 Alpha 分量可指定不透明度。

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

如需详细了解 hwb(),请参阅 Stefan Judis 撰写的这篇文章:hwb() - 一种面向人类的颜色表示法?

浏览器支持

  • 101
  • 101
  • 96
  • 15

来源

Chrome 101 中还有提取优先级功能。这可让您使用 fetchpriority 属性来提示浏览器应按什么顺序下载资源。在下面的示例中,低优先级图片以 fetchpriority="low" 表示。

<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

“抓取优先级”功能尚未在其他浏览器中提供,但您可以立即开始使用,让使用基于 Chromium 101 的浏览器的所有用户受益。

浏览器支持

  • 102
  • 102
  • x
  • 17.2

来源

Firefox 99 包含导航器界面的 pdfViewerEnabled 属性。此属性指示浏览器是否支持以内嵌方式显示 PDF 文件。

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

浏览器支持

  • 94
  • 94
  • 99
  • 16.4

来源

Beta 版浏览器版本

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

4 月份的新 Beta 版是 Chrome 102Firefox 100Safari 15.5

Chrome 102、Safari 15.5 和 Firefox 预览版包含 inert 属性。这会从标签页顺序和无障碍功能树中移除非互动元素。例如,当前在屏幕之外或隐藏的元素。

Chrome 102 为 HTML hidden 属性添加了新值 until-found。这样便可在网页折叠区域内的文本中实现“页内查找”和滚动到文本片段,就如同在手风琴模式中一样。有关详情,请参阅使用 hidden=until-found 让收起的内容可供访问一文。

浏览器支持

  • 102
  • 102
  • x
  • x

来源

Chrome 102 还包含 Local Font Access API,该 API 用于访问用户本地安装的字体。

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

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