本篇依然来自于我们的 《前端周刊》 项目！
译者点评
看完这份报告，最大的感受就是：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% 的开发者从未听说过）在阅读清单中排名第一，成为大家最想深入了解的特性。
推荐资源 (Resources)
- Ultimate CSS Grid & Layout Techniques, v3 -- Jen Kramer
- CSS Animations and Transitions -- David Khourshid
结语
CSS 依旧在飞速演进，:has()、Subgrid 等特性逐渐走向主流，但在布局、颜色、交互等方向上，开发者依旧面临不少棘手的痛点。随着浏览器支持的不断完善，2025 年的 CSS 正在变得前所未有的强大，不过学习曲线和适配成本依然不容小觑。
这份报告也涵盖了工具和生态的最新趋势：Tailwind CSS 继续稳坐最热门框架的宝座，CSS Modules 成为使用最广泛的 CSS-in-JS 方案；在 预处理/后处理器 (Pre-/Post-processors) 中，Sass/SCSS 仍然占据主流，而 实用工具 (Utilities) 则以 Prettier 领跑。同时，谷歌依旧是浏览器市场的绝对主导者。
更多详细数据与趋势解读，欢迎查阅完整报告 👉 State of CSS 2025
