9 月新增 Web 平台

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

稳定版浏览器

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

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

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

浏览器支持

  • Chrome:120。
  • 边缘:120。
  • Firefox:130.
  • Safari:17.2.

动画效果为“自动”(及更多)

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

借助 CSS interpolate-size 属性,页面可以选择为 CSS 内在尺寸关键字(例如 automin-contentfit-content)启用动画和转场效果(前提是这些关键字可以实现动画效果)。

浏览器支持

  • Chrome:129。
  • Edge:不支持。
  • Firefox:不支持。
  • Safari:不支持。

来源

CSS calc-size() 函数是一个类似于 calc() 的 CSS 函数,但 也仅支持对一个受支持的大小关键字执行操作。 支持的尺码关键字包括 automin-contentmax-contentfit-content

浏览器支持

  • Chrome:129。
  • Edge:129。
  • Firefox:不受支持。
  • Safari:不支持。

来源

如需了解详情,请访问 动画至高度:自动;(以及其他固有尺寸关键字)

在 JavaScript 中设置时长格式

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

浏览器支持

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

来源

WebCodecs API

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

浏览器支持

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