近日，「State of CSS 2025」年度调查报告公布。
这份报告收集了全球数万名开发者的真实使用经验和反馈，堪称是 Web 开发领域的“年度风向标”。
本篇我们盘点下这份报告的亮点部分。
1. 使用率最高的功能是 :has()
在调查的所有功能中，:has()是使用率最高也是最受欢迎的功能。
想必大家已经很熟悉了，它是一个功能非常强大的伪类，可以实现类似“父选择器”和“前面兄弟选择器”的功能。
举个简单的例子，下面的 CSS 代码表示如果 <a> 元素里面有 <img> 元素，则这个 <a> 元素就会匹配。
:has(img) {display: block;}我们可以使用这个选择器轻松区分是文字链接还是图像链接，并设置不同的 CSS 样式。
2. 使用率第二高的功能是 aspect-ratio
这个 CSS 属性允许你定义元素盒子的宽高比。
这意味着即使父容器或视口大小发生变化，浏览器也会调整元素的尺寸以保持指定的宽高比。
比如我们将一张图片设置为 3/2 宽高比：
img {aspect-ratio: 3/2;}3. 使用率最低的是 sibling-count 和 sibling-index
记得以前实现列表项交错动画时，要手动给每个元素设置不同的延迟吗？
现在，用 sibling-index() 一行代码就能搞定！
li {transition: opacity 0.3s ease;transition-delay: calc((sibling-index() - 1) * 100ms);}这个函数会自动获取元素在兄弟节点中的位置（从 1 开始计数），通过简单的计算就能实现流畅的交错动画效果。
如果再搭配 @starting-style，连入场动画都能轻松搞定：
li {transition: opacity 0.3s ease;transition-delay: calc((sibling-index() - 1) * 100ms); @starting-style {opacity: 0; }}实现效果如下：
之所以使用率最低，可以理解，因为浏览器支持还比较新。
4. 受欢迎程度第二高的功能是 Subgrid
Subgrid 表示子网格，它并不是一个 CSS 属性，而是 grid-template-columns 和 grid-template-rows 属性支持的关键字，其使用的场景需要外面已经有个 Grid 布局。
什么时候会用到 Subgrid 呢？
举个例子，这是一个布局效果：
你会发现，标题字数不一样，内容字数不一样，导致底部很难对齐。
然而我们想要的效果是这样的：
此时就可以用到 Subgrid，使用示例如下：
.wrapper {display: grid;grid-template-columns: 1fr 1fr;}.item {grid-row: 1 / 4;display: grid;grid-template-rows: subgrid;}5. 认知度增长最高的是 light-dark()
不知道你是否实现过网站的浅色和深色主题：
:root {/* 默认浅色主题 */--text-heading: #000;--text-body: #212121;--surface: #efefef; @media (prefers-color-scheme: dark) {/* 暗色主题 - 第一遍 */ --text-heading: #fff;--text-body: #efefef;--surface: #212121; }}.dark-theme {/* 暗色主题 - 又写一遍！ */--text-heading: #fff;--text-body: #efefef;--surface: #212121;}同样的颜色写两遍，一个给媒体查询（自动切换），一个给切换按钮。
改一次要改两个地方，烦死了！
现在使用 light-dark() 轻松实现！
:root {/* 跟随系统偏好 */color-scheme: light dark;/* 一次定义，自动切换 */--text-heading: light-dark(#000, #fff);--text-body: light-dark(#212121, #efefef);--surface: light-dark(#efefef, #212121);}就这么简单！系统是浅色就用第一个，暗色就用第二个。
6. 评论最多的功能是 line-clamp，多是负面评价
CSS 属性 line-clamp 用于将容器的内容限制为指定的行数，也就是我们常实现的内容多时显示省略号的效果。
举个例子：
p {width: 300px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}效果如下：
之所以被大家吐槽，多是因为技术局限性问题，比如：
能限制行数，无法精确控制高度 浏览器兼容性还不够好 与动态内容配合困难：当文本内容长度不确定时，难以准确控制显示效果
当我们实际使用 line-clamp 的时候，还要配合一系列属性比如 display、-webkit-box-orient、overflow、text-overflow，这种组合方案既复杂又不够语义化。
7. 结论
CSS 这些年无疑在快速的发展中，而人们对 CSS 的满意度也在持续攀升。
引用报告中的一句话：
“如果说 2025 年的主题是稳定不可能之事，那么 2026 年或许是实现期待已久的梦想之年。”
对于热爱 CSS 的人来说，现在正是尝试、学习并参与塑造未来发展方向的最佳时机。
新的一年，如果你想快速改变自己，欢迎加入我的知识星球：“冴羽·前端大佬成长之路”，10 年工作总结、100+ 篇精华主题、70W 字原创内容，带你升级认知、重构生活、建立知识管理系统、通关面试、引领职场。
