CSS 现状调查 2025

本篇依然来自于我们的《前端周刊》项目！

由团队成员 掘金安东尼 翻译，欢迎大家进群持续追踪全球最新前端资讯!!

原文：2025.stateofcss.com/en-US/featu...

译者点评

看完这份报告，最大的感受就是：CSS 野心很大，浏览器拖了点后腿 。:has()、Subgrid 这些炫酷的新特性已经冲进主流，甚至让人觉得"写 CSS 终于要像写逻辑一样丝滑了"。但问题是，光有标准还不够，浏览器支持不跟上，开发者就只能望梅止渴。

大家吐槽最多的还是老生常谈：高度不好搞、对齐容易崩、颜色空间复杂到劝退。更别说 line-clamp 这种，用着用着就想翻白眼的特性。

CSS 想做的事情很美好，结果开发者在项目里常常要写一堆兼容性兜底方案，心里只能默默念叨： "标准很酷，现实很骨感。"

简介 (Introduction)
特性 (Features)
所有特性 (All Features)
特性随时间变化 (Features Over Time)
布局痛点 (Layout Pain Points)
图形与形状痛点 (Shapes & Graphics Pain Points)
颜色痛点 (Colors Pain Points)
交互痛点 (Interactions Pain Points)
字体排版痛点 (Typography Pain Points)
数学特性痛点 (Math Features Pain Points)
其他特性痛点 (Other Features Pain Points)
阅读清单 (Reading List)
其他工具 (Other Tools)
CSS 使用情况 (CSS Usage)
资源 (Resources)
受访者画像 (Demographics)
奖项 (Awards)
结论 (Conclusion)
元数据 (Metadata)
关于 (About)

特性 (Features)

语法、关键字和其他语言特性。

80% 的受访者使用过 :has() 这个 CSS 特性。

也就是说，在这份调查里，十个人里有八个人都实际用过 :has()。

👉 :has() 是 CSS 里一个很强大的"父选择器"，比如：

css 复制代码

article:has(img) { border: 1px solid red; }

上面的规则意思是：选中所有内部包含 <img> 标签的 <article> 元素，并给它加红色边框。

在这次调查里，:has() 可以说是当之无愧的"人气王"，既是用得最多的，也是大家最喜欢的。

再看后面的排名：

Subgrid 在"最受喜爱"里拿下了第二；
aspect-ratio 则是"使用率"第二、"好感度"第三。

排在 Subgrid 后面的 line-clamp 收到了很多反馈，而且大多是负面评价。

至于用得最少的两个特性，是 sibling-count 和 sibling-index ，这也不奇怪，毕竟浏览器对它们的支持还很新、很有限。整体来看，最不受待见的就是 三角函数（Trigonometric Functions） ------原因大概不用多说，"三角学"这个词本身就够劝退的了。

特性随时间变化 (Features Over Time)

从时间趋势和整体背景来看，这份数据挺有意思的。

text-wrap: pretty 是这一年里使用率提升最大的新特性；
light-dark() 则是在认知度方面提升最多的。

text-wrap: pretty

这个属性的作用是：让长标题或段落在换行时更自然，避免把单个字孤零零地挤到下一行，看起来更舒服。

示例：

css 复制代码

h1 { text-wrap: pretty; }

如果标题很长，比如：

bash 复制代码

# 这是一段很长很长的标题，用了 pretty 之后换行效果更优雅

开启 pretty 后，浏览器会在换行时尽量保持行内字数均匀，不会把"的标题"单独扔到最后一行。

light-dark()

这是一个新出的颜色函数，可以根据 浅色模式 / 深色模式 自动切换颜色，不用写一堆 @media (prefers-color-scheme)。

示例：

css 复制代码

body { background: light-dark(#ffffff, #000000); color: light-dark(#000000, #ffffff); }

意思是：

如果是浅色模式 → 背景白、文字黑
如果是深色模式 → 背景黑、文字白

相当于内置了"主题切换"的智能函数。

👉 总结一下：

text-wrap: pretty → 解决文本换行更美观的问题
light-dark() → 让颜色跟随系统的浅/深色模式自动变化

颜色函数（color functions）也很特别，它们在使用率上一直垫底，可能说明还没真正被开发者接受。

我的 2025 年推荐 (Pick of the Year)

Josh W. Comeau（独立开发者 & 教师）：

我最喜欢的现代特性之一是 linear() 缓动函数，这个工具能把 JS 逻辑快速转化为 CSS 动画的弹簧效果，太好用了！

linear() 是 CSS 中的一种 时间函数 （timing function），用于控制动画的速度变化，线性的意思是指动画的速度是匀速的，不会有加速或减速的过程。动画从开始到结束，速度始终保持不变。

基本语法：

css 复制代码

animation: linear;

或者：

css 复制代码

transition: linear;

示例：使用 linear() 在动画中实现匀速变化

假设我们有一个元素需要从左到右移动，动画是匀速的，即 linear()：

css 复制代码

Linear Animation Example

解释：

animation: move-right 5s linear infinite;
- move-right 是动画的名称，对应于 @keyframes 中的定义；
- 5s 是动画持续的时间，表示 5 秒；
- linear 表示动画是匀速的，速度保持一致；
- infinite 表示动画会无限循环。

布局痛点 (Layout Pain Points)

虽然 Grid 无疑是一个强大的工具，但它的强大也伴随着陡峭的学习曲线，使得使用这个相对复杂的特性变成了一大痛点。

Flexbox 中，高度、溢出、定位和对齐仍然是 CSS 开发者常见的问题。

图形与形状痛点 (Shapes & Graphics Pain Points)

现在我们已经对矩形相当熟悉了，于是开始把目光投向更广阔的世界：三角形、圆形和多边形。可惜的是，仅靠 CSS 来绘制这些复杂形状依然很困难。

这也是为什么很多人会转而使用 SVG ------不过 SVG 本身也并非没有问题。

颜色痛点 (Colors Pain Points)

许多开发者希望 CSS 能超越简单的 浅色/深色 模式，提供更多管理完整主题化（theming）的工具，并在选择颜色时更好地确保适当的对比度。

尽管像 oklch() 这样的新色彩空间无疑非常强大，但它们也带来了自己的一系列问题。

交互痛点 (Interactions Pain Points)

很多人都在等浏览器把 滚动驱动动画 支持得更好，但也有人提醒说，像 轮播图 这样的新交互方式，可能会带来无障碍使用上的问题。

还有一个老大难是 动画过渡到 auto 值 之前一直做不到------好消息是，现在终于能实现了！

现在有三种主流做法，从"现代原生方案"到"兼容性方案"一应俱全。

方案 A（推荐，现代原生）：直接过渡到 auto

Chrome 129+ 已支持把尺寸从具体数值平滑过渡 到诸如 auto / fit-content / max-content 等"内在尺寸关键词"。开启两种方式二选一即可：

A1. 用 interpolate-size

css 复制代码

:root { interpolate-size: allow-keywords; } /* 一次性全局开启 */

.panel { height: 0; overflow: hidden; transition: height .3s; } .panel.open { height: auto; /* ← 现在能平滑过渡到 auto 了 */ }

A2. 用 calc-size()

css 复制代码

.panel { height: 0; overflow: hidden; transition: height .3s; } .panel.open { height: calc-size(auto); /* 等价于上面的效果 */ }

支持现状：已在 Chrome/Edge 129+ 实装；Safari/Firefox 仍在跟进中（写文时）。(Chrome for Developers, bram.us, joshwcomeau.com)

方案 B（纯 CSS 小技巧）：用 Grid 的 0fr → 1fr

不直接动 height，而是用单行网格的份额来"撑开"高度：

css 复制代码

.wrapper { display: grid; grid-template-rows: 0fr; /* 收起 */ transition: grid-template-rows .3s; } .wrapper.open { grid-template-rows: 1fr; /* 展开 */ } .panel { overflow: hidden; /* 必须，防止内容溢出 */ }

这个技巧在所有现代浏览器表现都不错。(stefanjudis.com, CSS-Tricks)

方案 C（老派兼容）：max-height 模拟

最稳妥的老办法：过渡 max-height，设一个"足够大"的上限。

arduino 复制代码

.panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .panel.open { max-height: 600px; /* 估个最大高度 */ }

缺点是得估高度，但几乎哪里都能用。(Stack Overflow, GeeksforGeeks)

字体排版痛点 (Typography Pain Points)

关于「文字排版痛点」的反馈：在浏览器里想要精准控制文字的垂直对齐（也就是常说的行距 leading ）一直都很麻烦。值得庆幸的是，text-box-edge 和 text-box-trim 这两个新属性，有望带来更精细的控制方式，让网页排版更到位。

问题：在 CSS 字体排版中，你觉得最让人头疼的地方是什么？（开放回答，可多选）

数学特性痛点 (Math Features Pain Points)

很多开发者对 calc() 表达了不满，特别是在 计算中处理不同单位 时问题最多。

其他特性痛点 (Other Features Pain Points)

浏览器支持（Browser Support）依旧是头号难题。
CSS Nesting 、:has()、:where() 也被提到复杂性过高。

阅读清单 (Reading List)

鲜为人知的 ::target-text（有 82% 的开发者从未听说过）在阅读清单中排名第一，成为大家最想深入了解的特性。

结语

CSS 依旧在飞速演进，:has()、Subgrid 等特性逐渐走向主流，但在布局、颜色、交互等方向上，开发者依旧面临不少棘手的痛点。随着浏览器支持的不断完善，2025 年的 CSS 正在变得前所未有的强大，不过学习曲线和适配成本依然不容小觑。

这份报告也涵盖了工具和生态的最新趋势：Tailwind CSS 继续稳坐最热门框架的宝座，CSS Modules 成为使用最广泛的 CSS-in-JS 方案；在预处理/后处理器 (Pre-/Post-processors) 中，Sass/SCSS 仍然占据主流，而实用工具 (Utilities) 则以 Prettier 领跑。同时，谷歌依旧是浏览器市场的绝对主导者。

更多详细数据与趋势解读，欢迎查阅完整报告 👉 State of CSS 2025

CSS 现状调查 2025

译者点评

目录

特性 (Features)

特性随时间变化 (Features Over Time)

我的 2025 年推荐 (Pick of the Year)

布局痛点 (Layout Pain Points)

图形与形状痛点 (Shapes & Graphics Pain Points)

颜色痛点 (Colors Pain Points)

交互痛点 (Interactions Pain Points)

字体排版痛点 (Typography Pain Points)

数学特性痛点 (Math Features Pain Points)

其他特性痛点 (Other Features Pain Points)

阅读清单 (Reading List)

推荐资源 (Resources)

结语