AI 摘要：本文梳理了 2025 年现代 CSS 的最新进展，包括动画到 auto、@function、if()、text-wrap、linear() easing、 shape()、增强的 attr()、reading-flow 等特性。这些新功能大多提升了样式抽象能力、响应式设计的灵活性和排版的可控性，同时展现了 Chrome 为主、Safari/Firefox 跟进的支持现状，并给出 Polyfill 和渐进增强的可行性建议。

1. 动画与尺寸控制
- Animate to Auto：首度支持从固定数值过渡到 `auto`、`min-content` 等关键字，解决了长久以来无法动画到内在高度的问题。
- field-sizing：表单元素可根据内容自动扩展，高度自适应不再依赖 JS。

2. HTML 与交互增强
- Popovers & Invokers：新增 `popover` 和 `invoker` 属性，原生支持弹出层及控制呼叫，提升可访问性与无 JS 支持的友好性。
- Custom Selects：允许开发者完全自定义 `<select>` 的 UI，不再局限于操作系统原生样式。

3. 函数与逻辑能力
- @function：允许开发者在 CSS 内自定义函数，提升逻辑复用与避免重复代码。
- if()：原生条件语法，类似 `switch`，用于条件性的样式应用。
- linear() easing：支持更复杂的动画缓动效果，可实现多点定义的动态曲线，而非仅限于 `cubic-bezier()`。
- shape()：改良版路径函数，用 CSS 单位定义 `clip-path`、`offset-path` 等，实现复杂图形与路径动画。
- random()（预览特性）：Safari 已支持，用于随机化样式值（实验性）。

4. 属性与排版优化
- text-wrap：新增 `balance`、`pretty`，提升文字换行的美观性与可读性，特别优化标题与段落排版。
- 增强的 attr()：可将 HTML 属性值解析为数字、颜色等数据类型，提升数据驱动的 CSS 表达能力。
- reading-flow：重新映射视觉顺序与键盘导航顺序，避免因布局重排导致的 Tab 键焦点错乱。

5. 值得关注的趋势
- Masonry 布局：提案逐步接近规范化，用于实现瀑布流布局。
- margin-trim：Safari 首发，期待跨浏览器可用。
- sibling-index() / sibling-count()：有助于顺序动画和灵活选择。
- View Transitions：Firefox 正在实现，进一步统一页面过渡体验。
- calc() 扩展：将支持单位间的乘除运算。

6. 经典与延续
- Container queries / container units：继承 `media queries` 的伟大进步。
- :has() 伪类：极大强化选择器能力。
- 滚动驱动动画 / Anchor Positioning / View Transition：现代 CSS 交互特性逐步进入主流支持。
- 额外视口单位（如 dvh） 已进入 baseline。

Frontendmasters

What You Need to Know about Modern CSS (2025 Edition)

If you thought 2024 was packed with amazing new CSS, well, you're right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.