哎呀，刚刷完《State of CSS 2025》报告，心里一阵小激动，哈哈。

说实话，这份年度调查真的像是前端圈的天气预报。

你想知道今年 CSS 哪些新玩意儿火得不行，哪些又是冷门小配角，咱今天就来八卦一下。

整体概览：大家的满意度又涨了

先抛个数据——全球近两万名开发者参与了这次调研。

结果显示，整体满意度比去年高出大约 7% ，懂的吧，就是大家对 CSS 的体验越来越爽。

这背后有两个关键因素：

一是新特性的落地速度加快；

二是浏览器兼容性终于不再是噩梦。

:has 成为“父选择器”明星

:has 在今年的使用率猛增，简直成了开发者的救星。

比如想给含图片的链接加特殊样式，只要写一句 :has 就搞定。

a:has {
  border-bottom: 2px solid #ff6600;
}

以前那套层层嵌套选择器，现在直接省事儿多了哈哈。

light-dark 打通浅暗主题

别提了我前几天刚把项目从单一浅色切到暗黑模式，光是改变量就快疯掉。

好在 light-dark 一上场，一次定义，两套颜色轻松搞定。

:root {
  color-scheme: light dark;
  --text-heading: light-dark;
  --bg-body: light-dark;
}

不对不对，我说错了是 :root { --bg-body: light-dark; } 那样才对。

亮点特性：增长Zui快的前五名

先说增长Zui快的，那必须提到 container queries。

它让我们Ke以根据父容器尺寸来响应式布局，不再盲目依赖视口宽度。

@container  {
  .card { grid-template-columns: repeat; }
}

还有 subgrid，这玩意儿在复杂网格布局里简直是救命稻草。

sibling-index 与 sibling-count

sibling-index 在列表交错动画里表现抢眼，一行代码就Neng算出延迟时间。

li {
  transition-delay: calc - 1) * 80ms);
}

sibling-count 则帮助我们快速获取同级元素总数，用于分页或动态列数计算时非常便利。

使用率低迷的特性：别急着扔掉

虽然大多数人dou在追热点，但其实有几项功Neng被埋在角落里——比如 @starting-style 和 aspect-ratio 的高级写法。

@starting-style Neng让元素在进入视口时自动带上初始样式，配合 transition 超顺滑。

div {
  @starting-style { opacity: 0; transform: translateY; }
  transition: opacity .4s ease, transform .4s ease;
}

# 那个 aspect-ratio 我们经常只写宽高比，其实还Ke以写成geng灵活的表达式，例如：

img { aspect-ratio: attr / attr; }

开发者情绪：焦虑 + 兴奋 = 前进动力

报告里还有一块专门聊情绪的——有趣的是大部分受访者表示“焦虑但充满期待”。

焦虑来源主要是新特性学习曲线陡峭；兴奋点则是kan到社区和浏览器厂商同步推进标准化。害，这种矛盾感真的hen真实啊。

社区支持的重要性

CSS Tricks、MDN、以及各种博客成了大家自救的主阵地。咱就是说Ru果你卡住了一篇搜索结果往往Neng把问题秒解决。

实战建议：怎么把这些亮点落地？

- 挑选适合自己项目的两三个新特性实验一下不要一次全搬进去，否则会踩雷。

- 用 :has 简化复杂选择器，让代码geng易读；

- 用 container queries 替代媒体查询中的硬编码宽度；

- 尝试 subgrid 把嵌套网格统一管理；

TIPS 小技巧合集

⚡️ 用 @layer 分层管理 CSS，让不同模块冲突几率降到Zui低；

⚡️ 使用 :is 合并选择器，提高匹配效率；

⚡️ 利用 clamp 实现弹性排版，无需再写媒体查询；

⚡️ 当需要兼容旧浏览器时用 @supports Zuo特性检测回退方案；

⚡️ 把重复变量抽到 :root 中，再配合 prefers-color-scheme 自动切换主题。

2025 年，你准备好玩转 CSS 吗？

说实话，这份《State of CSS》报告像是一面镜子，映射出我们现在所处的位置，也指引着下一步该往哪走。

别怕学习曲线陡峭，毕竟每一次突破dou是一次成长。哈哈，要是不懂，就去社区问问，大伙儿dou乐意帮忙呢！

© 前端老友记·2026 )

---