探索 2022 年 6 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。
浏览器稳定版
6 月,Chrome 103 和 Firefox 102 成为稳定版。
转换流和可读字节流
Firefox 102 支持转换流。这样可以实现从 ReadableStream
到 WritableStream
的管道,从而对区块执行转换。很高兴看到此功能可用于所有三个引擎,现在正是了解数据流的好时机。
Firefox 102 现在也支持可读取字节流,这使得通过 ReadableStreamBYOBReader
接口启用 BYOB(自带缓冲区)读取器。此方法可用于流式传输开发者提供的数据。
访问本地安装的字体
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
媒体功能。用于查询输出设备是否可以修改内容渲染后的外观。
新的 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) { … }
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 中已推出此功能,该功能可让嵌套网格沿用网格轨迹大小调整设置。
此外,对于网格布局,还可以为网格轨迹添加动画效果。
浏览器支持
- 107
- 107
- 66
- 16
添加了 showPicker()
方法,采用规范的方式显示日期、时间、颜色和文件的浏览器选择器。如需了解详情,请参阅在浏览器选择器中显示日期、时间、颜色和文件。
我们还解决了 display: contents
的无障碍功能问题,使这项实用功能可以安全使用,而不必担心从无障碍功能树中移除元素。
这些 Beta 版功能很快就会在稳定版浏览器中推出。
“网络新体验”系列视频的一部分