导语：
FrontEnd Focus 最近两期集中梳理了 CSS 与浏览器特性的新进展：第 714 期盘点 25 个值得关注的 CSS 功能（@scope、:has()、container queries、scroll-driven animations 等）；第 713 期宣布 Firefox 正式支持跨文档 View Transitions，让原生动效进入多浏览器时代。前端团队可以借此升级设计系统与交互体验。
新特性速览
- 结构与作用域： @scope、Cascade Layers 帮助组件局部样式隔离，:has() 带来“父选择器”能力，避免繁琐的 JS 辅助。
- 响应式布局： Container Queries、subgrid、Large/Small/Medium Viewport Units 让组件级响应式更易实现。
- 动画与动效： Scroll-driven animations、timeline-range、view-timeline 提供滚动驱动的声明式动画；Firefox 加入 View Transitions，使多文档过渡跨 Chrome/Edge/Firefox 控制。
实践建议
1）升级设计系统，定义使用 @scope、:has()、container queries 的规范，确保兼容策略；
2）利用 View Transitions API 构建页面导航、状态切换动效，结合无障碍要求；
3）用 Scroll-driven animations 创建滚动触发的可视化效果，代替 JS-heavy 逻辑；
4）持续监控各浏览器实现情况，对低版本提供渐进增强或回退方案。
行动清单
- 在组件库中新增对新 CSS 特性的示例与测试；
- 设计动效基线，统一 View Transition、滚动动画与性能要求；
- 更新 lint/构建工具支持，如 Stylelint 插件、PostCSS 兼容；
- 培训团队成员掌握新特性，用于提升体验与性能。
