Web 平台的新功能（12 月）

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

Rachel Andrew

发布时间：2025 年 12 月 16 日

稳定的浏览器版本

Chrome 143、Firefox 146 和 Safari 26.2 在 12 月发布到稳定版。 本文将介绍本月推出的众多新功能，其中多项功能已进入“Baseline 新近可用”阶段。

注意：这些帖子中包含从 MDN 提取的浏览器兼容性数据，这些数据可能尚未针对最新的浏览器版本进行更新。一旦 browser-compat-data 版本中显示相应信息，该帖子就会显示正确的信息。

@scope CSS @ 规则现在是基准

Firefox 146 包含 @scope CSS @ 规则，可让您选择特定 DOM 子树中的元素。定义一个选择器可以在其中定位元素的范围，从而避免使用过于具体和冗长的选择器。 例如，以下 CSS 仅在 <img> 元素位于类为 .card 的元素内时才以这些 <img> 元素为目标。

@scope (.card) {
    img {
        border-color: green;
    }
}

在 Firefox 146 中，此实用规则现已成为“Baseline 新近可用”规则。 如需了解详情，请参阅使用 CSS @scope at-rule 限制选择器的覆盖范围。

contrast-color() CSS 函数

Firefox 146 中还包含 contrast-color() 函数。此函数接受颜色值，并返回对比色，旨在确保达到 WCAG AA 最低对比度。

如需查看更多示例，请参阅 WebKit 博客上的如何在 CSS 中让浏览器选择对比鲜明的颜色。

Browser Support

• x
• x
• x
• 26

Source

Firefox 是首个发布 text-decoration-inset 属性的浏览器。借助此属性，您可以调整元素文本装饰的起点和终点，以便缩短、延长或移动其相对于渲染文本的位置。

font-language-override CSS 属性

Chrome 143 包含 font-language-override 属性。这样，您就可以替换特定语言的字体行为。 如果您使用的字体的语言支持不完善，则可以选择使用支持更完善的类似语言的字形。

Browser Support

• x
• x
• 34
• x

Source

CSS 锚定后备容器查询

Chrome 143 引入了 @container anchored(fallback)，用于根据应用了哪个 position-try-fallbacks 来设置锚定位置元素的后代的样式。

此类查询可用于根据锚定元素和锚定元素彼此之间的相对位置来设置锚定元素的系绳或其动画的样式。

background-position-x/y 长式语法的边相关语法

此外，Chrome 中还新增了一项功能，现在所有浏览器均可使用此功能：在 background-position 的简写属性中，定义背景图片相对于其某个边缘的位置。例如：

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

Browser Support

• x
• x
• 49
• 15.4

动画 overallProgress 属性

Safari 26.2 包含 overallProgress。 Animation 接口的此只读属性会返回一个介于 0 和 1 之间的数字，用于指示动画的总体进度，即动画距离完成状态还差多少。

此媒体资源现已归入“Baseline 新近可用”类别。

Browser Support

• 133
• 133
• 142
• 

Source

LCP 和 INP 现在属于“Baseline 新近可用”

Largest Contentful Paint (LCP) 和 Interaction to Next Paint (INP) 指标现在已成为基准指标，Safari 26.2 支持测量这些指标所需的 Contentful Paint API 和 Event Timing API。

这些功能已纳入 Interop 2025，您现在可以在所有主流浏览器的最新版本中衡量这些指标。

Largest Contentful Paint API

Browser Support

• 77
• 79
• 122
• x

Source

Event Timing API

Browser Support

• 76
• 79
• 89
• x

Source

CHIPS 达到“Baseline 新近可用”状态

Safari 26.2 还包含 CHIPS（Cookies Having Independent Partitioned State，即具有独立分区状态的 Cookie），可让您选择将 Cookie 存储到分区存储空间中，每个顶级网站都有一个单独的 Cookie Jar。

Browser Support

• 114
• 114
• 141
• x

Source

hidden="until-found"

Safari 26.2 支持 hidden="until-found"，该功能现在已成为基准新功能。

Browser Support

• 102
• 102
• 139
• 

Source

command 和 commandfor 属性

此外，对于 Safari 26.2 中的 HTML，还支持按钮上的 command 和 commandfor。这提供了一种声明式方式来控制弹出式窗口和对话框。

Browser Support

• 135
• 135
• 144
• 

Source

如需了解详情，请参阅command 和 commandfor 简介。

scrollend 事件

Safari 26.2 中另一项进入“Baseline 新近可用”阶段的功能是 scrollend 事件。此事件会在滚动完成时触发，如需详细了解此事件，请参阅新的 JavaScript 事件 Scrollend。

Browser Support

• 114
• 114
• 109
• 

Source

scrollbar-color 属性

借助 scrollbar-color 属性，您可以更改滚动条滑块和滚动条轨道的颜色。在 Safari 26.2 中，此功能也进入“Baseline 新近可用”阶段。

Browser Support

• 121
• 121
• 64
• x

Source

Beta 版浏览器

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

Chrome 144 包含 ::search-text 伪元素，用于设置网页内搜索结果的样式；还支持 scrolled，让您可以根据最新的滚动方向设置容器后代的样式。@scroll-state 还包括 Temporal API，其中包含用于处理日期和时间的标准对象和函数。

Firefox 147 是一项令人兴奋的发布版本，其中包含 CSS Anchor Positioning API、View Transitions API 和 Navigation API。

如需详细了解今年推出的精彩 CSS 和界面功能，请查看 CSS Wrapped 2025。