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 被地址栏遮挡的问题。

.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 正在迎来一个黄金时代：

对于前端开发者来说，现在是一个非常值得“重新认识 CSS” 的时刻。或许在不远的将来，写页面布局和交互，我们真的只需要 CSS。