這兩年，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ù)子元素或后代的存在來選中父級。

/* 給包含錯誤提示的表單控件加紅色邊框 */
.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 —— 平滑滾動

控制頁面或容器的滾動是否平滑。

html {
  scroll-behavior: smooth;
}

支持情況：主流瀏覽器都支持。

backdrop-filter —— 毛玻璃背景

給元素后面的背景加濾鏡（模糊、對比度等）。

.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

解決移動端 100vh 被地址欄遮擋的問題。

?

lvh = Large viewport height（最大高度）

?

svh = Small viewport height（最小高度）

?

dvh = Dynamic viewport height（動態(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)深淺色模式

告訴瀏覽器頁面支持暗色模式，表單控件和滾動條會自動適配。

: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 正在迎來一個黃金時(shí)代：

?開發(fā)者體驗(yàn)在快速提升：原生支持嵌套、父選擇器、深淺色模式，讓很多老大難問題迎刃而解。

?和 JS 的邊界在變化：過去需要 JS 才能實(shí)現(xiàn)的交互（輪播、條件邏輯），現(xiàn)在 CSS 草案里都有答案。

?預(yù)處理器逐漸“退居二線”：CSS 自己在不斷長大，Sass、LESS 這些工具不再是必需品。

對于前端開發(fā)者來說，現(xiàn)在是一個非常值得“重新認(rèn)識 CSS” 的時(shí)刻?；蛟S在不遠(yuǎn)的將來，寫頁面布局和交互，我們真的只需要 CSS。