CSS 正在接管交互，前端工程师该怎么看这件事

你有没有过这种感觉：本来该写在 JS 里的交互逻辑，现在 CSS 慢慢都能做了。

不是 CSS 变强了这么简单，而是浏览器把“状态监听”和“动效触发”这两块能力，正式从 JavaScript 往 CSS 迁移了。对 UI 工程师来说，这意味着交互层和表现层正在重新分工。

CSS 已经会“监听”了

以前我们需要 JS 监听 focus、hover、checked、focus-within，现在这些状态 CSS 自己就能接住。:focus-within 和 :has() 组合起来，甚至可以完成原来必须遍历 DOM 才能做的父子联动。

真正值得关注的，不是“能不能写”，而是“值不值得交出去”。如果只是样式切换，交给 CSS；如果状态还要触发接口请求、埋点、权限校验，那 JS 仍然是必要的。

scroll-driven animations 已经能用

如果你还在用 IntersectionObserver + classList 做滚动动画，现在可以考虑换成原生 CSS 方案了。scroll-driven animations 让动画进度和滚动位置直接绑定，而 scroll-triggered animations 则更进一步，允许在进入/离开视口时触发一次有固定时长的动画。

这两者的关键区别是：前者像视频进度条，滚动到哪里动画就到哪里；后者像开关，满足条件就播放一次。搞混这个，很容易写出“滚到底才动一下”的诡异效果。

对 UI 工程的影响

• 交互状态和样式状态可以合并，减少 class 切换
• 滚动动画不再需要 JS 计时器，主线程压力更小
• 但要学会判断浏览器支持：生产环境里 Chrome 146+ 才有 scroll-triggered animations

结论

CSS 不是要替代 JavaScript，而是要把“纯表现层”的状态监听交回给样式层。UI 工程师的核心能力，从“会用 JS 写交互”变成“知道边界在哪里”：什么时候交回 CSS，什么时候必须留在 JS。