近日，「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 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。
欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。
新的一年，如果你想快速改变自己，欢迎加入我的知识星球：“冴羽·前端大佬成长之路”，10 年工作总结、100+ 篇精华主题、70W 字原创内容，带你升级认知、重构生活、建立知识管理系统、通关面试、引领职场。用一年时间，实现十倍成长，一鸣惊人。
