AI 摘要：Chrome 142 引入了多项前端开发相关的新特性，包括用于滚动标记的 :target-before 与 :target-after 伪类、支持比较运算符的 CSS 样式容器查询 (style container queries) 与 if() 函数的范围语法 (range syntax)，以及可用于交互触发的 interestfor 属性。

1. 样式与选择器增强
• 新增 :target-before 和 :target-after 伪类，用于精确匹配滚动标记上下文中的前后状态，实现滚动位置的更直观样式反馈。
• 该伪类配合 :target-current 共同用于管理同组滚动标记的状态，可根据文档平面树 (flat tree order) 定义前后关系。

2. CSS 条件查询能力升级
• 样式容器查询与 if() 函数新增范围语法 (range syntax)，支持通过比较运算符（如 >、<）判断数值型样式变量。
• 可在样式级别进行动态比较，包括自定义属性、文字值 (literal) 与替代函数值 (attr()、env() 等)，前提是比较双方需为同一数据类型，如 <length>、<number>、<percentage> 等。
• 提供灵活的 CSS 逻辑表达方式，例如根据容器宽度或自定义属性值动态切换样式。

3. 新的用户交互机制：Interest Invokers
• 新增 interestfor 属性，可在 <button> 与 <a> 元素上声明“兴趣触发”行为。
• 用户通过长按、悬停或特殊快捷键表现出“兴趣”时，浏览器将触发目标元素的 InterestEvent，默认动作可显示或隐藏弹出层 (popover)。
• 为交互式组件提供无需脚本的原生事件机制，提高用户体验与无障碍交互能力。

4. 延伸阅读与订阅
• 文章并列出扩展资源，包括 Chrome 142 Release Notes、DevTools 更新、ChromeStatus、Release calendar 等。
• 鼓励开发者通过 YouTube、X、LinkedIn 等渠道订阅 Chrome Developers 更新，以持续获取版本迭代信息。

Chrome for Developers

New in Chrome 142  |  Blog  |  Chrome for Developers

The :target-before and :target-after pseudo-classes, range syntax for container queries, and more.