8 月新增 Web 平台

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

稳定版浏览器

2024 年 8 月,Firefox 129Chrome 128 已变为稳定版。本文将介绍 Web 平台中新增的功能。

Ruby 格式更新

HTML <ruby> 元素是一款强大的工具,可用于增强文本呈现效果,尤其是东亚语言。借助此元素,您可以在基本文本上方或旁边显示发音注释或其他补充信息。从 Chrome 128 开始,Ruby 注解支持换行,并且您可以使用 ruby-align CSS 属性设置 Ruby 文本的样式。

如需了解详情,请参阅可换行 <ruby> 和 CSS ruby-align 属性

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties(适用于多触控笔手写)

此变更将在 Chrome 128 中发布,可安全可靠地识别与屏幕互动的各个触控笔(指针),以便为与数字化器互动的每台设备设置特定颜色或触控笔形状。它扩展了 PointerEvent 接口,以添加新的属性 deviceProperties。其中包含属性 uniqueId,该属性表示会话级持久的、与文档隔离的唯一标识符,可用于可靠地识别与页面互动的各支触控笔。

Promise.try

此外,在 Chrome 128 中,Promise.try 可让您更轻松地使用 Promise 处理错误。有一个模式,其中包含一个函数 f。此函数可以是异步函数,也可以返回 Promise。如需使用 Promise 语义来处理这两种情况下的错误,您需要将函数封装在 Promise 中。这通常是通过 new Promise(resolve => resolve(f())) 实现的。

Promise.try 是一种更直接的方式来实现相同的操作。借助它,您可以启动一个 Promise 链,用于捕获 .catch 处理程序中的所有错误,而无需同时处理同步和异步异常流。

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

为条目添加动画效果

Firefox 129 包含两个用于为进入效果添加动画效果的 CSS 功能,这些功能现已列入“新推出的基准”类别。

@starting-style 规则用于在元素在页面上呈现之前定义其初始样式。对于从 display: none 动画呈现的元素,此属性是必需的,因为它们需要一个动画呈现的起始状态。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

进入效果还需要对离散属性(即无法在值之间插值的属性)进行动画处理。现在,您可以在转场简写形式中使用 transition-behavior: allow-discreteallow-discrete 值来实现此目的。Firefox 129 现在也支持此功能。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

如需了解详情,请参阅现在在基准版中:为进入效果添加动画

PerformanceResourceTiming 的增补

Firefox 129 添加了 PerformanceResourceTiming 接口的 contentTyperesponseStatus 属性。这两个值分别表示提取的资源的内容类型和提取资源时返回的 HTTP 响应状态代码。

contentType

Browser Support

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

Source

responseStatus

Browser Support

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

Source

地理定位 toJSON() 方法

Firefox 129 中还有 GeolocationCoordinates.toJSON()GeolocationPosition.toJSON()

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 现在支持 WebDriver BiDi。这意味着,您可以将 Puppeteer 与 Chrome 或 Firefox 搭配使用来实现自动化操作。 如需了解详情,请参阅 Firefox、Chrome 和 Puppeteer 中的 WebDriver BiDi 已准备好投入生产环境使用Firefox 正式支持 Puppeteer

Beta 版浏览器

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

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

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

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

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

Chrome 129 中还提供了 Intl.DurationFormat,用于格式化时长,例如支持多种语言区域的“1 小时 40 分钟 30 秒”。