2025 CSS 一路狂飆！
這兩年，CSS 可以說是“狂飆”式發(fā)展，不斷帶來各種實(shí)用的新特性。很多過去需要借助 Sass、JS 或者奇怪 hack 的場景，現(xiàn)在用原生 CSS 就能輕松實(shí)現(xiàn)。
最近，《The State of CSS 2025》公布了最新調(diào)查結(jié)果，我們就來看看 CSS 在 2025 年的現(xiàn)狀，以及其中最受歡迎的新特性。
最受歡迎的 CSS 新特性
調(diào)查顯示，開發(fā)者最關(guān)注的十大新特性包括：
圖片
下面挑一些實(shí)用的來簡單介紹。
:has() —— 父選擇器
過去 CSS 無法選父元素，現(xiàn)在 :has() 讓你可以根據(jù)子元素或后代的存在來選中父級(jí)。
/* 給包含錯(cuò)誤提示的表單控件加紅色邊框 */
.form-group:has(.error) {
border: 1px solid red;
}支持：Chrome 105+、Safari 15.4+、Edge 105+、Firefox 121+
aspect-ratio —— 固定寬高比
用來直接控制元素的寬高比例，解決了多年來的“16:9 寬高比”難題，不再需要 padding hack。
.video {
width: 100%;
aspect-ratio: 16 / 9;
background: #ddd;
}支持情況：主流瀏覽器都支持。
scroll-behavior —— 平滑滾動(dòng)
控制頁面或容器的滾動(dòng)是否平滑。
html {
scroll-behavior: smooth;
}支持情況：主流瀏覽器都支持。
backdrop-filter —— 毛玻璃背景
給元素后面的背景加濾鏡（模糊、對(duì)比度等）。
.modal {
backdrop-filter: blur(8px);
}支持情況：主流瀏覽器都支持。
CSS 原生嵌套
寫法更接近 Sass，CSS 終于原生支持嵌套：
.card {
padding: 1rem;
& h2 {
font-size: 1.25rem;
}
&:hover {
background: #eee;
}
}支持情況：Chrome 112+、Safari 16.5+、Firefox 117+。
新的視口單位 lvh / svh / dvh
解決移動(dòng)端 100vh 被地址欄遮擋的問題。
?
lvh = Large viewport height（最大高度）
?
svh = Small viewport height（最小高度）
?
dvh = Dynamic viewport height（動(dòng)態(tài)隨地址欄變化）
.hero {
height: 100dvh; /* 始終與當(dāng)前視口高度一致 */
}支持情況：Chrome 108+、Safari 15.4+、Firefox 111+。
text-wrap: balance —— 標(biāo)題更好看
讓多行文字更平均地?fù)Q行，避免“一行太長一行太短”。
h1 {
text-wrap: balance;
}支持情況：Chrome 114+、Safari 16.4+、Firefox 125+。
Subgrid —— 子網(wǎng)格布局
子元素的 grid 可以繼承父網(wǎng)格的行列軌道。
.parent {
display: grid;
grid-template-columns: 1fr 2fr;
}
.child {
display: grid;
grid-template-columns: subgrid; /* 繼承父網(wǎng)格列 */
}支持情況：Firefox 最早支持；Chrome 117+、Safari 16.2+ 也已支持。
color-scheme —— 系統(tǒng)深淺色模式
告訴瀏覽器頁面支持暗色模式，表單控件和滾動(dòng)條會(huì)自動(dòng)適配。
:root {
color-scheme: light dark;
}支持情況：現(xiàn)代瀏覽器均支持。
light-dark() —— 一行寫主題色
根據(jù)當(dāng)前模式選擇不同的顏色。
body {
background: light-dark(#fff, #000);
}支持情況：Chrome 120+、Safari 16.4+、Firefox 123+。
shape() —— 靈活的形狀定義
定義裁剪或排版區(qū)域，可以取代 clip-path 的部分功能（實(shí)驗(yàn)性）。
.image {
clip-path: shape(circle at center, 50%);
}if() —— CSS 條件判斷（實(shí)驗(yàn)性）
允許在 CSS 里寫條件邏輯。
.box {
width: if(var(--wide) = true, 400px, 200px);
}CSS 相關(guān)工具
CSS 框架
Tailwind CSS 繼續(xù)遙遙領(lǐng)先。
CSS-in-JS
CSS Modules 使用最廣，其次是 Styled Components。不過，Styled Components 作者已宣布停止維護(hù)，某種程度上也代表 CSS-in-JS 的熱潮在退去。
預(yù)處理器/后處理器
Sass 依然在用，但隨著 CSS 內(nèi)置功能越來越多（變量、嵌套、顏色函數(shù)…），預(yù)處理器的重要性逐漸下降。
實(shí)用工具
寫在最后
回顧這兩年，可以說 CSS 正在迎來一個(gè)黃金時(shí)代：
?開發(fā)者體驗(yàn)在快速提升：原生支持嵌套、父選擇器、深淺色模式，讓很多老大難問題迎刃而解。
?和 JS 的邊界在變化：過去需要 JS 才能實(shí)現(xiàn)的交互（輪播、條件邏輯），現(xiàn)在 CSS 草案里都有答案。
?預(yù)處理器逐漸“退居二線”：CSS 自己在不斷長大，Sass、LESS 這些工具不再是必需品。
對(duì)于前端開發(fā)者來說，現(xiàn)在是一個(gè)非常值得“重新認(rèn)識(shí) CSS” 的時(shí)刻?；蛟S在不遠(yuǎn)的將來，寫頁面布局和交互，我們真的只需要 CSS。
