2025 CSS 一路狂飆！
這兩年，CSS 可以說是“狂飆”式發展，不斷帶來各種實用的新特性。很多過去需要借助 Sass、JS 或者奇怪 hack 的場景，現在用原生 CSS 就能輕松實現。
最近，《The State of CSS 2025》公布了最新調查結果，我們就來看看 CSS 在 2025 年的現狀，以及其中最受歡迎的新特性。
最受歡迎的 CSS 新特性
調查顯示，開發者最關注的十大新特性包括：
圖片
下面挑一些實用的來簡單介紹。
:has() —— 父選擇器
過去 CSS 無法選父元素，現在 :has() 讓你可以根據子元素或后代的存在來選中父級。
/* 給包含錯誤提示的表單控件加紅色邊框 */
.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（動態隨地址欄變化）
.hero {
height: 100dvh; /* 始終與當前視口高度一致 */
}支持情況：Chrome 108+、Safari 15.4+、Firefox 111+。
text-wrap: balance —— 標題更好看
讓多行文字更平均地換行，避免“一行太長一行太短”。
h1 {
text-wrap: balance;
}支持情況：Chrome 114+、Safari 16.4+、Firefox 125+。
Subgrid —— 子網格布局
子元素的 grid 可以繼承父網格的行列軌道。
.parent {
display: grid;
grid-template-columns: 1fr 2fr;
}
.child {
display: grid;
grid-template-columns: subgrid; /* 繼承父網格列 */
}支持情況：Firefox 最早支持；Chrome 117+、Safari 16.2+ 也已支持。
color-scheme —— 系統深淺色模式
告訴瀏覽器頁面支持暗色模式，表單控件和滾動條會自動適配。
:root {
color-scheme: light dark;
}支持情況：現代瀏覽器均支持。
light-dark() —— 一行寫主題色
根據當前模式選擇不同的顏色。
body {
background: light-dark(#fff, #000);
}支持情況：Chrome 120+、Safari 16.4+、Firefox 123+。
shape() —— 靈活的形狀定義
定義裁剪或排版區域，可以取代 clip-path 的部分功能（實驗性）。
.image {
clip-path: shape(circle at center, 50%);
}if() —— CSS 條件判斷（實驗性）
允許在 CSS 里寫條件邏輯。
.box {
width: if(var(--wide) = true, 400px, 200px);
}CSS 相關工具
CSS 框架
Tailwind CSS 繼續遙遙領先。
CSS-in-JS
CSS Modules 使用最廣，其次是 Styled Components。不過，Styled Components 作者已宣布停止維護，某種程度上也代表 CSS-in-JS 的熱潮在退去。
預處理器/后處理器
Sass 依然在用，但隨著 CSS 內置功能越來越多（變量、嵌套、顏色函數…），預處理器的重要性逐漸下降。
實用工具
寫在最后
回顧這兩年，可以說 CSS 正在迎來一個黃金時代：
?開發者體驗在快速提升：原生支持嵌套、父選擇器、深淺色模式，讓很多老大難問題迎刃而解。
?和 JS 的邊界在變化：過去需要 JS 才能實現的交互（輪播、條件邏輯），現在 CSS 草案里都有答案。
?預處理器逐漸“退居二線”：CSS 自己在不斷長大，Sass、LESS 這些工具不再是必需品。
對于前端開發者來說，現在是一個非常值得“重新認識 CSS” 的時刻。或許在不遠的將來，寫頁面布局和交互，我們真的只需要 CSS。
