网站平台将于 3 月推出

了解 2024 年 3 月已在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。

Rachel Andrew

稳定版浏览器

2024 年 3 月，Firefox 124、Safari 17.4 和 Chrome 123 进入稳定状态。本文将介绍 Web 平台中新增的功能。

使用 light-dark() 自适应配色方案

light-dark() 颜色函数已在 Chrome 123 中推出，可让您更轻松地根据用户偏好调整配色方案。在以下示例中，color-scheme 在 root 上设置为 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 依赖颜色

浏览器支持

  • Chrome：123。
  • Edge：123。
  • Firefox：120.
  • Safari：17.5。

来源

使用 field-sizing 更好地控制输入

此外，在 Chrome 123 中，field-sizing 属性支持自动增大文本输入字段。

浏览器支持

  • Chrome：123。
  • Edge：123。
  • Firefox：不受支持。
  • Safari：不受支持。

来源

使用 text-spacing-trim 为 CJK 标点调整字距

在 Chrome 123 中，text-spacing-trim 属性会对中文、日语和韩语 (CJK) 标点字符应用 kern 调整，以调整过大的间距。如需了解详情，请参阅推出面向国际用户的四项 CSS 新功能。

浏览器支持

  • Chrome：123。
  • 边缘：123。
  • Firefox：不支持。
  • Safari：不受支持。

来源

@scope CSS at-rule

Safari 17.4 包含 @scope，可让您选择特定 DOM 子树中的元素，精确地定位元素，而无需编写难以替换的过于具体的选择器，也不必将选择器与 DOM 结构过于紧密地耦合。

如需了解详情，请参阅使用 CSS @scope at-rule 限制选择器的范围

浏览器支持

  • Chrome：118。
  • Edge：118。
  • Firefox：背后有旗帜。
  • Safari：17.4。

来源

改进了画中画功能

Chrome 123 包含两项功能，可改善画中画体验。 第一种是 CSS picture-in-picture显示模式。这样，您就可以编写特定的 CSS 规则，这些规则仅在网页应用（部分）以画中画模式显示时应用。

第二项功能可让您在文档画中画窗口中使用 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 静态路由 API 绕过特定路径的 Service Worker。

Long Animation Frames API

Chrome 123 还包含 Long Animation Frames API，这是 Long Tasks API 的更新，可让您更好地了解界面 (UI) 更新缓慢的问题。这有助于识别可能会影响下一次绘制的互动 (INP) Core Web Vitals 指标（用于衡量响应能力）的缓慢动画帧，或者识别其他影响流畅度的界面卡顿。

浏览器支持

  • Chrome：123。
  • Edge：123。
  • Firefox：不受支持。
  • Safari：不受支持。

来源

content-visibility 属性

Firefox 124 支持 CSS content-visibility 属性。此属性用于控制元素是否渲染其内容，让浏览器在需要之前省略渲染内容。

浏览器支持

  • Chrome：85.
  • 边缘：85。
  • Firefox：125。
  • Safari：18。

来源

对 ArrayBuffer 和数组分组的增补

在 Safari 17.4 中，JavaScript 获得了一些新功能，支持 detached 属性以及 ArrayBuffer 的 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。

来源

这些功能现在可互操作，因此加入了“新推出的 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 也包含在内，因此也成为了“新推出的基准”的一部分。transition-behavior 属性也受支持。弹出式窗口和 transition-behavior 是 Interop 2024 的一部分。

Chrome 124 包含 setHTMLUnsafe 和 parseHTMLUnsafe 方法，可让您从 JavaScript 使用声明式影子 DOM，从而使这些功能能够互操作。此外，还包括 WebSocketStream API 和 writingsuggestions 属性。