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.

AI 摘要：本文系统讲解了 CSS 新增的 linear() 时间函数如何取代传统 Bézier 曲线实现物理感动画（如弹簧、反弹等）。作者展示了从手动绘制到使用工具自动生成曲线的全过程，分析了 linear() 的语法结构、性能表现及使用局限，并给出实际工程中使用变量与媒体查询的最佳实践。

1. 背景与问题
• 传统的 CSS 动画多依赖 cubic-bezier() 曲线控制速率，但难以模拟弹性或物理效果。
• 开发者过去往往用 JavaScript 库（如 React Spring）实现，但带来主线程阻塞与性能权衡。
• CSS 新增的 linear() 函数允许通过一系列线性分段点定义任意缓动曲线，可原生表达弹跳、振动等效果。

2. linear() 函数原理
• linear() 接受一组 0–1 范围的浮点值，各点线性连接形成曲线。
• 可超出 0–1 实现“overshoot”（超冲），营造弹性。
• 点数越多，动画越平滑；作者从 11 到 50 点的实验验证了差异。

3. 工具实战
• 推荐使用 Linear() Easing Generator 与 Easing Wizard 自动生成数据。
• 新语法支持为每个点标注时间百分比，使曲线在较少数据点下更精确。
• 工具可将弹性参数（stiffness、damping、mass）转化为 CSS 代码，并计算最优持续时间。

4. 限制与挑战
• 时间基准限制：CSS 必须定义 duration，不支持真正的物理时间动态计算。
• 中断问题（interrupts）：React Spring 可处理惯性，而 CSS 转场中断后立即反向，缺乏自然过渡感。
• 性能考量：实际测试显示即使 linear() 包含百余数据点，帧率与体积影响极小（仅增约 1.3 kB gzip），但建议通过 CSS 变量复用。

5. 实用建议与模式
• 将常用的 linear() 表达式与持续时间封装为 CSS 变量（design tokens）。
• 用 @supports 检查浏览器兼容性并提供 cubic-bezier() 回退。
• 结合 @media (prefers-reduced-motion) 照顾无障碍动效偏好。
• 在注释中记录物理参数，方便未来调整。

Joshwcomeau

Springs and Bounces in Native CSS • Josh W. Comeau

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll…