9 月新增 Web 平台

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

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

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

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

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

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

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

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: not supported.
  • Safari: not supported.

Source

CSS calc-size() 函数是一种类似于 calc() 的 CSS 函数,但它还支持对恰好一个受支持的尺寸关键字执行操作。支持的尺寸关键字包括 automin-contentmax-contentfit-content

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: not supported.
  • Safari: not supported.

Source

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

在 JavaScript 中设置时长格式

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

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox Technology Preview: supported.
  • Safari: 16.4.

Source

WebCodecs API

现在,Firefox 130 在桌面设备上支持 Web Codecs API,可让 Web 开发者对视频串流的各个帧和音频分块进行低级访问。新接口包括:VideoEncoderVideoDecoderEncodedVideoChunkVideoFrameVideoColorSpace。此 API 尚未在 Firefox Android 中受支持,因此无法完全实现基准新版,但 Firefox Nightly 支持 Android。

Browser Support

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Source

针对自定义属性的 CSS 样式查询

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

详细了解 CSS 样式查询

相同的文档视图转换

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

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

Beta 版浏览器

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

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

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

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