了解 2024 年 3 月在稳定版和 Beta 版网络浏览器中推出的一些有趣的功能。
浏览器稳定版
2024 年 3 月，Firefox 124、Safari 17.4 和 Chrome 123 成为稳定版。这篇博文介绍了 Web 平台中新增的功能。
使用light-dark()调整配色方案
在 Chrome 123 中推出了 light-dark() 颜色函数，可让您更轻松地根据用户偏好调整配色方案。在以下示例中，root 上的 color-scheme 被设置为 light dark。自定义属性使用 light-dark() 颜色函数来设置将根据用户的浅色模式或深色模式偏好设置切换的颜色。
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
如需了解更多示例和详细信息，请参阅使用 light-dark() 时，依赖于 CSS color-scheme 的颜色
使用 field-sizing 更好地控制输入
此外，在 Chrome 123 中，field-sizing 属性用于启用自动增长的文本输入字段。
浏览器支持
- 123
- x
- x
- x
包含 text-spacing-trim 的 CJK 标点符号
在 Chrome 123 中，text-spacing-trim 属性对中文、日语和韩语 (CJK) 标点符号字符应用字距调整，以调整多余的空格。如需了解详情，请参阅 CSS 的四项全新国际功能简介。
浏览器支持
- 123
- x
- x
- x
@scope CSS @ 规则
Safari 17.4 包含 @scope，让您可以选择特定 DOM 子树中的元素，精确定位元素，无需编写难以替换的过于具体选择器，并且不会将选择器与 DOM 结构过于紧密地耦合。
如需了解详情，请参阅使用 CSS @scope at-rule 限制选择器的覆盖范围
改进了画中画功能
Chrome 123 包含两项功能，用于改善画中画体验。
第一种是 CSS picture-in-picture
显示模式。这样，您就可以编写特定的 CSS 规则，这些规则仅在 Web 应用（的一部分）在画中画模式下显示时应用。
第二个功能可让您使用文档画中画窗口中的 opener.focus，将系统级焦点置于文档画中画窗口所属的标签页上。
这样一来，您就可以在必要时使原始标签页回到前台。 例如，当用户需要访问的界面体验不适合较小的画中画窗口时。
支持在块和表格布局中使用 align-content
Chrome 123 和 Safari 17.4 支持在块和表格布局中使用 align-content。了解 align-content 支持的变更。
Service Worker Static Routing API
从 Chrome 123 开始，Service Worker Static Routing API 可用。此 API 可让您以声明方式声明应如何提取某些资源路径，这意味着浏览器不需要仅为了从缓存中提取响应，或直接从网络中提取响应而运行 Service Worker。
如需了解详情，请参阅使用 Service Worker Static Routing API 绕过特定路径的 Service Worker。
Long Animation Frames API
Chrome 123 还包含 Long Animation Frames API，这是对 Long Tasks API 的更新，可让您更好地理解缓慢的界面 (UI) 更新。 这有助于识别可能会影响下一次绘制的核心网页指标（用于衡量响应速度）的缓慢动画帧，或识别其他会影响流畅度的界面卡顿。
浏览器支持
- 123
- x
- x
- x
content-visibility 属性
Firefox 124 支持 CSS content-visibility 属性。此属性用于控制某个元素是否渲染其内容，从而允许浏览器在需要相应内容之前不渲染相应内容。
向 ArrayBuffer 和数组分组添加内容
在 Safari 17.4 中，JavaScript 通过支持 detached 属性以及 ArrayBuffer 的 transfer() 和 transferToFixedLength() 方法获得一些新功能。
Safari 17.4 还包含数组分组方法 Object.groupBy 和 Map.groupBy。如需详细了解数组分组，请参阅 JavaScript 获取数组分组方法。
这些功能现在可互操作，因此加入 Baseline 新推出。
setHTMLUnsafe和parseHTMLUnsafe
Safari 17.4 中随附的 setHTMLUnsafe 和 parseHTMLUnsafe 方法支持从 JavaScript 使用声明式 Shadow DOM。与 innerHTML 或 DOMParser 相比，这些方法还提供更简单的方法，以命令方式将 HTML 解析为 DOM。
Beta 版浏览器版本
Beta 版浏览器可让您预览下一个稳定版本浏览器中将推出的功能。不妨借此机会测试那些可能会在全球发布之前对您的网站造成影响的新功能或移除。新的 Beta 版是 Firefox 125 和 Chrome 124。这些版本为平台带来了许多很棒的功能。如需了解所有详细信息，请查看版本说明。这里仅介绍其中的一些亮点。
Firefox 125 注定是一个令人兴奋的版本。
它在块上添加了 align-content，使此功能具有互操作性。此外，Popover API 也包含在内，因此成为了新发布的 Baseline 的一部分。transition-behavior 属性也将受支持。弹出式窗口和 transition-behavior 是 2024 年互操作性的一部分。
Chrome 124 包含 setHTMLUnsafe 和 parseHTMLUnsafe 方法，以允许从 JavaScript 使用声明式 Shadow DOM，从而使这些功能具有互操作性。此外，还包括 WebSocketStream API 和 writingsuggestions 属性。