tgoop.com/cosine_front_end/2908
Create:
Last Update:
Last Update:
#优质博文 #CSS #新特性 #前端
非常全的 CSS 新特性合集。
你需要知道的现代 CSS（2025版）
AI 摘要：本文梳理了 2025 年现代 CSS 的最新进展，包括动画到 auto、@function、if()、text-wrap、linear() easing、 shape()、增强的 attr()、reading-flow 等特性。这些新功能大多提升了样式抽象能力、响应式设计的灵活性和排版的可控性，同时展现了 Chrome 为主、Safari/Firefox 跟进的支持现状，并给出 Polyfill 和渐进增强的可行性建议。
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
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。
author Chris Coyier
BY cosine - 前端人の日常频道
Share with your friend now:
tgoop.com/cosine_front_end/2908