了解 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 才能使用此功能,请详细了解提前提示。
Beta 版浏览器
通过浏览器 Beta 版,您可以抢先体验即将推出的浏览器稳定版中提供的功能。在面向所有用户发布新版本之前,测试可能会对您的网站产生影响的新功能(或内容移除情况),这无疑是一个好时机。
4 月份推出了 Chrome 104、Firefox 103 和 Safari 16 这 3 款新 Beta 版。
范围媒体查询的新语法
Chrome 104 包含媒体查询级别 4 规范中针对范围媒体查询的新语法。例如,之前编写的媒体查询如下所示:
@media (min-width: 400px) { … }
现在可以这样编写:
@media (width >= 400px) { … }
Region Capture API
桌面版 Chrome 104 还包含 Region Capture API。这样,您就可以在分享拍摄的视频之前剪裁和移除其中的内容。
Safari 16 为浏览器带来了多项关键功能
Safari 16 似乎是 Safari 团队的又一款令人兴奋的版本。此版本新增了 Interop 2022 中包含的许多功能,很高兴能在年中推出这么多功能。下面列出了我最喜欢的一些功能,但如需了解详情,请参阅版本说明。
与许多开发者一样,我非常高兴看到容器查询支持大小查询,这项功能目前在 Chrome 中也需要通过标志启用。
此外,Safari 16 也支持 grid-template-columns
和 grid-template-rows
的 subgrid
值。此功能已存在于 Firefox 中,而 Chrome 正处于开发阶段,并允许嵌套网格继承网格轨迹大小。
此外,网格布局还支持为网格轨道添加动画效果。
浏览器支持
其中包含 showPicker()
方法,可通过规范方式显示日期、时间、颜色和文件的浏览器选择器。如需了解详情,请参阅显示日期、时间、颜色和文件的浏览器选择器。
我们还解决了 display: contents
的无障碍功能问题,让用户可以放心使用这项实用功能,而不会冒从无障碍功能树中移除元素的风险。
这些 Beta 版功能很快就会在稳定版浏览器中推出。