在2024年三月份，Firefox 124、Safari 17.4 和 Chrome 123 成为了稳定版本。本文介绍了 Web 平台新增的新功能。
使用 light-dark() 调整配色方案
light-dark() 颜色函数已经在 Chrome 123 中引入，可以更轻松地根据用户的偏好调整配色方案。在下面的示例中，color-scheme 被设置为在根上使用 light dark。自定义属性使用 light-dark() 颜色函数设置颜色，根据用户的浅色或深色模式偏好进行切换。
1 | :root { |
在 CSS 配色方案依赖颜色与light-dark()中查找更多示例和详细信息。
浏览器支持：
Chrome：123；Edge：不支持；Firefox：120；Safari：不支持
通过 field-sizing 更好地控制输入
同样在 Chrome 123 中，field-sizing 属性使得文本输入字段可以自动增长。
浏览器支持：
Chrome：123；Edge：不支持；Firefox：不支持；Safari：不支持
使用 text-spacing-trim 对 CJK 标点进行字距调整
在 Chrome 123 中，text-spacing-trim 属性对中文、日文和韩文（CJK）标点字符应用字距调整，以调整过度的间距。在介绍 CSS 的四个新国际特性 中了解更多信息。
浏览器支持：
Chrome：123；Edge：不支持；Firefox：不支持；Safari：不支持
@scope CSS at-rule
Safari 17.4 包括 @scope，允许您选择特定 DOM 子树中的元素，精确地定位元素，而无需编写难以覆盖的过于具体的选择器，也无需将选择器过于紧密地耦合到 DOM 结构中。
浏览器支持：
Chrome：118；Edge：118； Firefox：不支持；Safari：17.4
画中画改进
Chrome 123 包括两个功能来改进画中画体验。
- 第一个是
CSS画中画显示模式。这使您可以编写仅在（部分） Web 应用程序显示为画中画模式时应用的特定CSS规则。 - 第二个功能允许您从文档画中画窗口中使用 opener.focus 将系统级焦点带到拥有文档画中画窗口的选项卡上。
这样可以在必要时将原始选项卡返回到前台。例如，当用户需要访问无法适应较小画中画窗口的 UI 体验时。
块和表格布局中的 align-content 支持
Chrome 123 和 Safari 17.4 支持块和表格布局中的 align-content。
Service Worker 静态路由 API
从 Chrome 123 开始，Service Worker 静态路由 API 可用。该 API 允许您声明性地指定应如何获取某些资源路径，这意味着浏览器不需要仅运行服务工作者才能从缓存中获取响应，或者直接从网络获取响应。
长动画帧 API
Chrome 123 还包括长动画帧 API，这是 Long Tasks API 的更新，可以更好地理解慢用户界面（UI）更新。这对于识别可能影响响应性的慢动画帧或识别影响流畅度的其他 UI 卡顿非常有用。
浏览器支持：
Chrome：123；Edge：不支持；Firefox：不支持；Safari：不支持
content-visibility 属性
Firefox 124 包括对CSS content-visibility属性的支持。该属性控制元素是否完全呈现其内容，允许浏览器省略渲染内容直到需要为止。
浏览器支持：
Chrome：85；Edge：85；Firefox：124；Safari：不支持
ArrayBuffer 和数组分组的增加
在 Safari 17.4 中，JavaScript 获得了一些新功能，支持 ArrayBuffer 的 detached 属性以及 transfer() 和 transferToFixedLength() 方法。
浏览器支持：
Chrome：114；Edge：114；Firefox：122；Safari：17.4
Safari 17.4 还包括数组分组方法 Object.groupBy 和 Map.groupBy。要了解有关数组分组的更多信息，请阅读 JavaScript 正在获得数组分组方法。
浏览器支持：
Chrome：117；Edge：117；Firefox：119；Safari：17.4
这些功能现在是可互操作的，因此加入到了基线新增功能中。
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。transition-behavior 属性也将得到支持。Popover 和 transition-behavior 属于 Interop 2024 的一部分。
Chrome 124 包括 setHTMLUnsafe 和 parseHTMLUnsafe 方法，允许从 JavaScript 中使用声明性 Shadow DOM，使这些功能可以互操作。还包括 WebSocketStream API 和 writingsuggestions 属性。