6 月新增 Web 平台

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

Rachel Andrew

浏览器稳定版

6 月，Chrome 103 和 Firefox 102 成为稳定版。

转换流和可读字节流

Firefox 102 支持转换流。这样可以实现从 ReadableStream 到 WritableStream 的管道，从而对区块执行转换。很高兴看到此功能可用于所有三个引擎，现在正是了解数据流的好时机。

浏览器支持

  • 67
  • 79
  • 102
  • 14.1

来源

Firefox 102 现在也支持可读取字节流，这使得通过 ReadableStreamBYOBReader 接口启用 BYOB（自带缓冲区）读取器。此方法可用于流式传输开发者提供的数据。

浏览器支持

  • 89
  • 89
  • 102
  • x

来源

访问本地安装的字体

Chrome 103 包含 Local Font Access API，该 API 允许访问用户本地安装的字体。请求访问设备上安装的字体后，调用 window.queryLocalFonts() 以获取已安装的字体的数组。

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

update 媒体功能

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

浏览器支持

  • 113
  • 113
  • 102
  • 17

来源

新的 HTTP 状态代码 - 103 早期提示

Chrome 103 添加了新的状态代码 HTTP 103 Early Hints。如果服务器或 CDN 知道需要特定的子资源集才能加载页面，它会建议浏览器预连接源站，或者在需要这些资源的页面进入时预加载资源。您需要更新服务器或 CDN 才能使用此功能。详细了解 Early Hints。

Beta 版浏览器版本

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

4 月份的新 Beta 版是 Chrome 104、Firefox 103 和 Safari 16。

适用于范围媒体查询的新语法

Chrome 104 包含媒体查询 4 级规范中针对范围媒体查询的新语法。例如，之前编写的媒体查询如下所示：

@media (min-width: 400px) { … }

现在可以写成这样：

@media (width >= 400px) { … }

浏览器支持

  • 104
  • 104
  • 102
  • 16.4

来源

Region Capture API

桌面版 Chrome 104 还包含 Region Capture API。启用此选项后，可以先剪裁并移除已拍摄的视频中的内容，然后再分享。

Safari 16 为浏览器引入了几项重要功能

Safari 16 似乎是 Safari 团队推出的另一个激动人心的版本。此版本添加了 2022 年互操作性中的许多功能，看到这么多功能在年中点点落地，真是让人兴奋。在此，我重点介绍了一些我非常喜欢的功能，但请务必查看版本说明，了解更多信息。

我和许多开发者一起非常高兴看到容器查询支持大小查询，目前 Chrome 中一项标志也在这一功能背后实现。

此外，Safari 16 支持 grid-template-columns 和 grid-template-rows 的 subgrid 值。此功能已在 Firefox 中推出，且 Chrome 中已推出此功能，该功能可让嵌套网格沿用网格轨迹大小调整设置。

浏览器支持

  • 117
  • 117
  • 71
  • 16

来源

此外，对于网格布局，还可以为网格轨迹添加动画效果。

浏览器支持

  • 107
  • 107
  • 66
  • 16

添加了 showPicker() 方法，采用规范的方式显示日期、时间、颜色和文件的浏览器选择器。如需了解详情，请参阅在浏览器选择器中显示日期、时间、颜色和文件。

浏览器支持

  • 99
  • 99
  • 101
  • 16

来源

我们还解决了 display: contents 的无障碍功能问题，使这项实用功能可以安全使用，而不必担心从无障碍功能树中移除元素。

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

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