了解我们在 2024 年 1 月在稳定版和 Beta 版网络浏览器中推出的一些有趣的功能。
浏览器稳定版
2024 年 1 月，Firefox 122、Chrome 121 和 Safari 17.3 成为稳定版。这篇博文介绍了 Web 平台中新增的功能。
<select>中的<hr>
Firefox 122 添加了 <hr> 元素作为 <select> 元素的允许子级。这有助于提高包含大量选项的选定列表的可读性。现在，所有主流浏览器引擎都支持此功能。但值得注意的是，目前没有任何浏览器向无障碍树公开 <hr>。
浏览器支持
- 119
- 119
- 122
- 17
HTMLSelectElement.showPicker
对于 Firefox 中的 <select> 元素，还有 HTMLSelectElement 的 showPicker() 方法。此选择器与选择元素时通常会显示的选择器相同，但也可以通过按下按钮或其他用户互动触发。
Largest Contentful Paint (LCP) API
Firefox 122 还支持 LCP API。此性能 API 可在用户与网页互动之前提供有关最大图片或文本绘制的时间信息。如需详细了解 LCP，请参阅 LCP 文档。
CSS 滚动条属性
Chrome 121 增加了对滚动条属性 scrollbar-color 和 scrollbar-width 的支持。如需了解详情，请参阅滚动条样式设置一文。
CSS font-palette 动画
借助 font-palette 属性，您可以选择特定调色板来渲染彩色字体。此属性现在支持动画，因此在调色板之间切换时，可以在两个所选调色板之间实现平滑过渡。
ArrayBuffer 的 transfer() 和 transferToFixedLength() 方法
Firefox 包含 ArrayBuffer 的 JavaScript transfer() 和 transferToFixedLength() 方法。transfer() 方法会创建一个与当前 ArrayBuffer 具有相同字节内容的新 ArrayBuffer，然后分离原始 ArrayBuffer。transferToFixedLength() 方法的工作原理相同，但会创建固定大小的 ArrayBuffer。
Speculation Rules API 更新
网站使用 Speculation Rules API 以编程方式告知 Chrome 预呈现哪些页面，从而通过缩短网页导航时间来提供更好的用户体验。
Chrome 121 支持文档规则：文档规则是对推测规则语法的扩展，可让浏览器从页面中的元素获取用于推测加载的网址列表。文档规则可能包含这些链接可以使用的条件。 通过上述两项操作，再加上新的“紧急程度”字段，您可以在用户悬停鼠标或按下鼠标时立即在网页上自动预提取或预渲染链接。
Beta 版浏览器版本
Beta 版浏览器可让您预览下一个稳定版本浏览器中将推出的功能。不妨借此机会测试那些可能会在全球发布之前对您的网站造成影响的新功能或移除。新的 Beta 版包括 Firefox 123、Chrome 122 和 Safari 17.4。 这些版本为平台带来了许多很棒的功能。如需了解所有详细信息，请查看版本说明。这里仅介绍其中的一些亮点。
Firefox 123 Beta 版包含声明式 Shadow DOM。
此外，在 Firefox 123 中，还支持在服务器准备完整响应时预加载资源所需的 103 Early Hints HTTP 信息响应状态代码。
Safari 17.4 Beta 版中提供了许多优质功能。CSS 支持对块容器和表格单元格使用 @scope、align-content 以及 ::grammar-error 和 ::spelling-error 伪元素，此外还支持更多其他功能。
在表单中，表单控件支持垂直写入模式，<input type="date"> 支持 showPicker() 方法，iOS 上的 <select> 内支持 <hr>。
JavaScript 还引入了一些新功能，支持 ArrayBuffer 的 detached()、transfer() 和 transferToFixedLength() 方法以及其他功能。
Chrome 122 Beta 版在 Async Clipboard API 的 read() 方法中添加了一个 unsanitized 选项，用于检索未经过排错的 HTML 格式。对于 JavaScript，我们提供了新的迭代器帮助程序，并针对内置 Set 类提供了新方法。
此外，在 Chrome 122 中，还新增了 Storage Buckets API，该 API 旨在使在内存压力较大时永久性存储空间逐出的预测性更高。