2024 年 10 月，全新 Web 平台推出

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

Rachel Andrew

发布时间：2025 年 10 月 30 日

稳定版浏览器

Chrome 142 和 Firefox 144 于 10 月发布到稳定版，本文将探讨这对 Web 平台意味着什么。

适用于单页应用的 View Transitions API

Firefox 144 支持同文档视图过渡。这包括支持：

  • :active-view-transition 伪类
  • view-transition-class 属性
  • view-transition-name 属性
  • ::view-transition 伪元素
  • ::view-transition-group() 伪元素
  • ::view-transition-image-pair() 伪元素
  • ::view-transition-new() 伪元素
  • ::view-transition-old() 伪元素

这使得同一文档视图过渡成为 Baseline 新近可用功能。

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 144.
  • Safari: 18.

Source

<button> 元素上的 command 和 commandfor 属性

Firefox 144 支持 command 和 commandfor。如需详细了解这些属性，请参阅command 和 commandfor 简介。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 144.
  • Safari Technology Preview: supported.

moveBefore() 方法

Firefox 现在支持 Element、DocumentFragment 和 Document 接口的 moveBefore() 方法。这样一来，您就可以将对象的直接子元素移动到其另一个子元素之前，同时这两个元素都会保留其状态。

如需了解详情，请参阅使用 moveBefore() 在 DOM 突变期间保留状态。

:target-before 和 :target-after 伪类

Chrome 142 添加了伪类，用于匹配同一滚动标记组内位于有效标记（匹配 :target-current）之前或之后的滚动标记（由扁平树顺序确定）：

  • :target-before：匹配组中位于扁平树顺序中的活动标记之前的所有滚动标记。
  • :target-after：匹配组中扁平树顺序中位于有效标记之后的所有滚动标记。

Browser Support

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

Source

样式容器查询和 if() 的范围语法

Chrome 142 通过添加对范围语法的支持，增强了 CSS 样式查询和 if() 函数。

它将样式查询扩展到精确值匹配（例如 style(--theme: dark)）之外。开发者可以使用比较运算符（例如 > 和 <）来比较自定义属性、字面量值（例如 10px 或 25%）以及来自替换函数（例如 attr() 和 env()）的值。为了进行有效比较，等式两边必须解析为相同的数据类型。它仅限于以下数值类型：<length>、<number>、<percentage>、<angle>、<time>、<frequency> 和 <resolution>。

兴趣调用者（interestfor 属性）

Chrome 142 还为 <button> 和 <a> 元素添加了 interestfor 属性。此属性可为元素添加“兴趣”行为。当用户对元素表现出兴趣时，系统会在目标元素上触发操作，例如显示弹出式窗口。

用户代理会检测用户何时通过以下方法对元素表现出兴趣：将指针悬停在元素上、按下键盘上的特殊快捷键，或在触摸屏上长按元素。当显示或失去兴趣时，目标上会触发 InterestEvent，该目标具有弹出式信息框的默认操作，例如显示和隐藏弹出式信息框。

Beta 版浏览器

Beta 版浏览器可让您抢先体验下一个稳定版浏览器中的功能。在面向全球发布该版本之前，您可以先测试可能会影响您网站的新功能或移除的功能。 本月的新 Beta 版包括 Firefox 145 和 Chrome 143，Safari 26.1 仍在进行中。

Firefox 145 包含 ToggleEvent 接口的 source 属性和 Atomics.waitAsync() 静态方法。

Chrome 145 包含 CSS 锚定回退容器查询。 此功能引入了 @container anchored(fallback)，用于根据应用的 position-try-fallbacks 值来设置锚定位置元素的后代的样式。