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() - 一种适合人类的颜色表示法?

浏览器支持

  • Chrome:101.
  • Edge:101。
  • Firefox:96。
  • Safari: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 的浏览器的用户受益。

浏览器支持

  • Chrome:102.
  • Edge:102.
  • Firefox:132.
  • Safari:17.2。

来源

Firefox 99 包含 Navigator 接口的 pdfViewerEnabled 属性。此属性指示浏览器是否支持内嵌显示 PDF 文件。

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

浏览器支持

  • Chrome:94.
  • Edge:94.
  • Firefox:99.
  • Safari:16.4.

来源

浏览器测试版

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

4 月份推出了 Chrome 102Firefox 100Safari 15.5 这 3 款新 Beta 版。

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

Chrome 102 为 HTML hidden 属性添加了新值 until-found。这样一来,对于页面收起区域内的文本,您可以在页面内查找和滚动到文本片段(如折叠式样式中的示例)。如需了解详情,请参阅使用 hidden=until-found 使收起的内容可访问一文。

浏览器支持

  • Chrome:102.
  • Edge:102.
  • Firefox:不受支持。
  • Safari:不受支持。

来源

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

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

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