发布时间：2025 年 10 月 28 日
Chrome 142 现已推出，本文将介绍此版本中的一些主要功能。阅读完整的 Chrome 142 版本说明。
此版本的亮点：
- 将滚动标记与
:target-before和:target-after伪类相匹配。 - 在样式容器查询和
if()CSS 函数中使用范围语法。 - 当用户通过
interestfor对某个元素表现出兴趣时做出反应。
:target-before 和 :target-after 伪类
这些伪类用于匹配同一滚动标记组中位于有效标记（与 :target-current 匹配）之前或之后的滚动标记，具体取决于扁平树顺序：
:target-before：匹配组中位于扁平树顺序中的活动标记之前的所有滚动标记。:target-after：匹配组中扁平树顺序中位于有效标记之后的所有滚动标记。
样式容器查询和 if() 的范围语法
Chrome 通过添加对范围语法的支持，增强了 CSS 样式查询和 if() 函数。
它将样式查询扩展到精确值匹配（例如 style(--theme: dark)）之外。开发者可以使用比较运算符（例如 > 和 <）来比较自定义属性、字面量值（例如 10px 或 25%）以及来自替换函数（例如 attr() 和 env()）的值。为了进行有效比较，等式两边必须解析为相同的数据类型。它仅限于以下数值类型：<length>、<number>、<percentage>、<angle>、<time>、<frequency> 和 <resolution>。
示例：
将自定义属性与字面长度进行比较：
@container style(--inner-padding > 1em) {
.card {
border: 2px solid;
}
}
比较两个字面值
@container style(1em < 20px) {
/* ... */
}
在 if() 中使用样式范围：
.item-grid {
background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}
兴趣调用者（interestfor 属性）
Chrome 会向 <button> 和 <a> 元素添加 interestfor 属性。此属性可为元素添加“兴趣”行为。当用户对元素表现出兴趣时，系统会在目标元素上触发操作，例如显示弹出式窗口。
用户代理会检测用户何时通过以下方法对元素表现出兴趣：将指针悬停在元素上、按下键盘上的特殊快捷键，或在触摸屏上长按元素。当显示或失去兴趣时，目标上会触发 InterestEvent，该目标具有弹出式信息框的默认操作，例如显示和隐藏弹出式信息框。
深入阅读
这仅涵盖了一些关键亮点。如需了解 Chrome 141 中的其他更改，请参阅以下链接。
订阅
如需及时了解最新动态，请订阅 Chrome Developers YouTube 频道，这样每当我们发布新视频时，您都会收到电子邮件通知。您也可以在 X 或 LinkedIn 上关注我们，获取新文章和博文。
Chrome 143 发布后，我们会立即在此处告知您 Chrome 的新功能！