9 月新增 Web 平台

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

Rachel Andrew

稳定版浏览器

2024 年 9 月，Firefox 130、Safari 18 和 Chrome 129 进入稳定状态。本文将介绍 Web 平台新增的一些功能。

具有 <details> 的 name 属性的专属折叠式动作条

Firefox 130 支持 <details> 元素的 name 属性。这会对 <details> 元素进行分组，并且一次只能打开一组中的一个元素。这样，您无需使用 JavaScript 即可创建专属的折叠式动作条。

浏览器支持

  • Chrome：120.
  • Edge：120。
  • Firefox：130。
  • Safari：17.2。

动画效果为“自动”（及更多）

Chrome 129 添加了 CSS interpolate-size 属性和 calc-size() 函数。

借助 CSS interpolate-size 属性，网页可以选择启用 CSS 固有尺寸调整关键字（例如 auto、min-content 和 fit-content）的动画和过渡（如果这些关键字可以为动画）。

浏览器支持

  • Chrome：129.
  • Edge：不受支持。
  • Firefox：不受支持。
  • Safari：不受支持。

来源

CSS calc-size() 函数是一种类似于 calc() 的 CSS 函数，但它还支持对恰好一个受支持的尺寸关键字执行操作。支持的尺寸关键字包括 auto、min-content、max-content 和 fit-content。

浏览器支持

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

来源

如需了解详情，请参阅 CSS 中的“height: auto;”（及其他固有尺寸关键字）动画。

在 JavaScript 中设置时长格式

Chrome 129 中还包含 Intl.DurationFormat，它提供了一种格式化时长的方法（例如“1 小时 40 分钟 30 秒”），支持多种语言区域。

浏览器支持

  • Chrome：129.
  • Edge：129。
  • Firefox：不受支持。
  • Safari：16.4.

来源

WebCodecs API

桌面版 Firefox 130 现在支持 Web Codecs API，可让 Web 开发者对视频串流的各个帧和音频分块进行低级访问。新界面包括：VideoEncoder、VideoDecoder、EncodedVideoChunk、VideoFrame 和 VideoColorSpace。此 API 尚未在 Firefox Android 中受支持，因此无法完全实现基准新版，但 Firefox Nightly 支持 Android。

浏览器支持

  • Chrome：94.
  • Edge：94.
  • Firefox：130。
  • Safari：16.4。

来源

自定义属性的 CSS 样式查询

Safari 18 支持多项新功能，包括 CSS 样式查询。 样式查询提供了一种创建可重复使用的样式并将其作为一个组应用的方法。例如，您有一个具有多个变体的可重用组件时。

浏览器支持

  • Chrome：111.
  • Edge：111.
  • Firefox：不受支持。
  • Safari：18.

来源

详细了解 CSS 样式查询。

相同的文档视图转换

Safari 18 还支持 SPA 的同一文档视图转换，让您可以在应用的不同状态之间创建视觉转换。

浏览器支持

  • Chrome：111.
  • Edge：111.
  • Firefox：不支持。
  • Safari：18.

来源

详细了解同一文档视图转换

Beta 版浏览器

使用 Beta 版浏览器，您可以预览下一个稳定版本的内容。在该版本面向全球发布之前，您可以先测试可能会影响您网站的新功能或移除的功能。新版 Beta 版为 Firefox 131、Chrome 130 和 Safari 18.1。这些版本为平台带来了许多出色的功能。如需了解所有详情，请参阅版本说明。下面仅列举了其中的几个亮点。

Firefox 131 包含新的 JavaScript 迭代器帮助程序，并且现在启用了具有独立分区状态的 Cookie (CHIPS)。

Chrome 130 支持 box-decoration-break: clone，包括内嵌 fragment（行布局）和块 fragment（为打印和多列创建的 fragment）。此外，IndexedDB 中的错误报告功能也得到了改进，Web 串行 SerialPort 接口新增了 connected 属性。

Safari 18.1 修复了现有功能的 bug。