6 月新增 Web 平台

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

6 月,Chrome 103Firefox 102 均已发布稳定版。

Firefox 102 支持转换流。这样可以实现从 ReadableStreamWritableStream 的管道,从而对分块执行转换。很高兴这项功能已在所有三个引擎中推出,现在是了解数据流的好时机。

浏览器支持

  • Chrome:67。
  • 边缘:79。
  • Firefox:102。
  • Safari:14.1。

来源

Firefox 102 现在还支持可读取的字节流,可通过 ReadableStreamBYOBReader 接口启用 BYOB(自带缓冲区)读取器。这可用于流式传输开发者提供的数据。

浏览器支持

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

来源

访问本地安装的字体

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 媒体功能。此属性用于查询输出设备是否可以在内容呈现后修改内容的外观。

浏览器支持

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

来源

新的 HTTP 状态代码 - 103 提前提示

Chrome 103 添加了新的状态代码 HTTP 103 Early Hints。如果服务器或 CDN 知道需要一组子资源才能加载某个网页,则可以建议浏览器预连接到来源,甚至在需要这些资源的网页传入时预加载资源。您需要更新服务器或 CDN 才能使用此功能,请详细了解提前提示

Beta 版浏览器

通过浏览器 Beta 版,您可以抢先体验即将推出的浏览器稳定版中提供的功能。在面向所有用户发布新版本之前,测试可能会对您的网站产生影响的新功能(或内容移除情况),这无疑是一个好时机。

4 月份推出了 Chrome 104Firefox 103Safari 16 这 3 款新 Beta 版。

范围媒体查询的新语法

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

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

现在可以这样编写:

@media (width >= 400px) {  }

浏览器支持

  • Chrome:104。
  • Edge:104。
  • Firefox:102.
  • Safari:16.4。

来源

Region Capture API

桌面版 Chrome 104 还包含 Region Capture API。这样,您就可以在分享拍摄的视频之前剪裁和移除其中的内容。

Safari 16 为浏览器带来了多项关键功能

Safari 16 似乎是 Safari 团队的又一款令人兴奋的版本。此版本新增了 Interop 2022 中包含的许多功能,很高兴能在年中推出这么多功能。下面列出了我最喜欢的一些功能,但如需了解详情,请参阅版本说明

与许多开发者一样,我非常高兴看到容器查询支持大小查询,这项功能目前在 Chrome 中也需要通过标志启用。

此外,Safari 16 也支持 grid-template-columnsgrid-template-rowssubgrid 值。此功能已存在于 Firefox 中,而 Chrome 正处于开发阶段,并允许嵌套网格继承网格轨迹大小。

浏览器支持

  • Chrome:117.
  • Edge:117.
  • Firefox:71。
  • Safari:16.

来源

此外,网格布局还支持为网格轨道添加动画效果。

浏览器支持

  • Chrome:107.
  • Edge:107。
  • Firefox:66.
  • Safari:16.

其中包含 showPicker() 方法,可通过规范方式显示日期、时间、颜色和文件的浏览器选择器。如需了解详情,请参阅显示日期、时间、颜色和文件的浏览器选择器

浏览器支持

  • Chrome:99.
  • Edge:99。
  • Firefox:101.
  • Safari:16。

来源

我们还解决了 display: contents无障碍功能问题,让用户可以放心使用这项实用功能,而不会冒从无障碍功能树中移除元素的风险。

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

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