了解 2024 年 8 月已在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。
稳定版浏览器
2024 年 8 月,Firefox 129 和 Chrome 128 已变为稳定版。本文将介绍 Web 平台中新增的功能。
Ruby 格式更新
HTML <ruby>
元素是一款强大的工具,可用于增强文本呈现效果,尤其是东亚语言。借助此元素,您可以在基本文本上方或旁边显示发音注释或其他补充信息。从 Chrome 128 开始,Ruby 注解支持换行,并且您可以使用 ruby-align
CSS 属性设置 Ruby 文本的样式。
如需了解详情,请参阅可换行 <ruby>
和 CSS ruby-align
属性。
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
处理程序中的所有错误,而无需同时处理同步和异步异常流。
为条目添加动画效果
Firefox 129 包含两个用于为进入效果添加动画效果的 CSS 功能,这些功能现已列入“新推出的基准”类别。
@starting-style
规则用于在元素在页面上呈现之前定义其初始样式。对于从 display: none 动画呈现的元素,此属性是必需的,因为它们需要一个动画呈现的起始状态。
进入效果还需要对离散属性(即无法在值之间插值的属性)进行动画处理。现在,您可以在转场简写形式中使用 transition-behavior: allow-discrete
或 allow-discrete
值来实现此目的。Firefox 129 现在也支持此功能。
如需了解详情,请参阅现在在基准版中:为进入效果添加动画。
对 PerformanceResourceTiming
的增补
Firefox 129 添加了 PerformanceResourceTiming
接口的 contentType
和 responseStatus
属性。这两个值分别表示提取的资源的内容类型和提取资源时返回的 HTTP 响应状态代码。
contentType
responseStatus
地理定位 toJSON()
方法
Firefox 129 中还有 GeolocationCoordinates.toJSON()
和 GeolocationPosition.toJSON()
。
WebDriver BiDi
Firefox 129 现在支持 WebDriver BiDi。这意味着,您可以将 Puppeteer 与 Chrome 或 Firefox 搭配使用来实现自动化操作。 如需了解详情,请参阅 Firefox、Chrome 和 Puppeteer 中的 WebDriver BiDi 已准备好投入生产环境使用和Firefox 正式支持 Puppeteer。
Beta 版浏览器
通过浏览器 Beta 版,您可以预览下一个稳定版浏览器中将推出的内容。在该版本面向全球发布之前,您可以先测试可能会影响您网站的新功能或移除的功能。新 Beta 版为 Firefox 130 和 Chrome 129。Safari 18 Beta 版测试仍在进行中。这些版本为该平台带来了许多出色的功能。如需了解所有详情,请参阅版本说明。下面仅列举了其中的几个亮点。
Firefox 130 支持将 <details>
元素分组的 <details>
元素的 name 属性,其中一次只能打开组中的一个元素。这样,您无需使用 JavaScript 即可创建专属的折叠式动作条。
Chrome 129 添加了 CSS interpolate-size
属性和 calc-size()
函数。
借助 CSS interpolate-size
属性,页面可以选择为 CSS 内在尺寸关键字(例如 auto
、min-content
和 fit-content
)启用动画和过渡效果(前提是这些关键字可以实现动画效果)。
CSS calc-size()
函数是一种类似于 calc()
的 CSS 函数,但它还支持对恰好一个受支持的尺寸关键字执行操作。目前支持的尺寸关键字包括 auto
、min-content
、max-content
和 fit-content
。
Chrome 129 中还提供了 Intl.DurationFormat
,用于格式化时长,例如支持多种语言区域的“1 小时 40 分钟 30 秒”。