9 月新增 Web 平台

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

Rachel Andrew

稳定版浏览器

2024 年 9 月，Firefox 130、Safari 18 和 Chrome 129 已稳定发布。这个 这篇文章介绍了 Web 平台中新增的功能。

注意：这些博文中包含从 MDN 提取的浏览器兼容性数据，而且可能尚未针对最新的浏览器版本进行更新。该博文会在 browser-compat-data 版本中立即显示正确信息。

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

Firefox 130 支持 <details> 元素的 name 属性。此群组 <details> 元素，而一个组内只有一个元素可在 。这样，您无需使用 JavaScript 即可创建专属的折叠式动作条。

浏览器支持

• 120
• 120
• 130
• 17.2

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

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

借助 CSS interpolate-size 属性，页面可以选择为 CSS 内在尺寸关键字（例如 auto、min-content 和 fit-content）启用动画和转场效果（前提是这些关键字可以实现动画效果）。

浏览器支持

• 129
• x
• x
• 倍

来源

CSS calc-size() 函数是一个类似于 calc() 的 CSS 函数，但 也仅支持对一个受支持的大小关键字执行操作。 支持的尺码关键字包括 auto、min-content、max-content 和 fit-content。

浏览器支持

• 129
• 129
• x
• 倍

来源

如需了解详情，请访问 动画至高度：自动；（以及其他固有尺寸关键字）。

在 JavaScript 中设置时长格式

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

浏览器支持

• 129
• 129
• 倍
• 16.4

来源

WebCodecs API

通过 Web Codecs API 现支持桌面设备上的 Firefox 130， 开发者可对视频流的各个帧进行低级别访问； 音频块。新界面包括：VideoEncoder、VideoDecoder、 EncodedVideoChunk、VideoFrame 和 VideoColorSpace。此 API 并不是 将 Baseline Newly 设为可用，因为 Firefox Android 尚不支持它， 不过，也有适用于 Android 的 Firefox Nightly 支持。

浏览器支持

• 94
• 94
• 130
• 16.4

来源

自定义属性的 CSS 样式查询

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

浏览器支持

• 111
• 111
• x
• 18 岁

来源

详细了解 CSS 样式查询。

同一文档视图转换

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

浏览器支持

• 111
• 111
• 倍
• 18 岁

来源

详细了解 同一文档视图过渡

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 是对现有功能问题修复的版本。