2025年CSS新特性大盘点

原创于 2025-11-29 16:42:40 发布 · 561 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

2025年了，CSS又进化了

去年写过一篇 CSS 新特性盘点，本来以为今年不会有太大变化。结果一看，新东西比去年还多。

这次整理了几个我觉得特别实用的功能，浏览器支持也都不错，可以用起来了。

终于可以动画到 auto 了

之前我们做高度展开动画，基本都是靠 max-height 硬撑。

比如从 0 展开到实际高度，只能写个超大的值，体验很差。

现在可以直接动画到 auto 了：

html {
  interpolate-size: allow-keywords;
}

加上这一行，所有 height: 0 到 height: auto 的过渡都能生效。

或者你也可以用 calc-size() 函数，不需要全局设置：

.content {
  height: 3lh;
  overflow: hidden;
  transition: height 0.2s;

  &.expanded {
    height: calc-size(auto, size);
  }
}

这个功能总算来了。

而且不只是 height，任何接受尺寸的属性都能用，不只是 auto，min-content 这些关键字也行。

目前 Chrome 已经支持，其他浏览器应该也快了。

Popover 和 Invoker

Popover 是个 HTML 属性，给任意元素加上就有开关功能。

配合 Invoker 用起来更爽，不用写 JavaScript 就能控制弹窗。

<button commandfor="menu" command="toggle">
  打开菜单
</button>

<div id="menu" popover>
  菜单内容
</div>

这样就够了，按钮点击自动控制弹窗显示隐藏。

浏览器会自动处理无障碍访问、键盘操作、焦点管理这些细节。

而且还能配合 Anchor Positioning 用，让弹窗自动定位到触发元素旁边。

Popover 已经全浏览器支持，Invoker 目前只有 Chrome，不过有 polyfill 可以用。

CSS 里可以写函数了

CSS 有 calc()、clamp() 这些内置函数，现在我们可以自己写了：

@function --titleBuilder(--name) {
  result: var(--name) " is cool.";
}

然后就能在任何地方调用：

.title::after {
  content: --titleBuilder("CSS");
}

这个功能让 CSS 更像编程语言了。

把复杂逻辑封装到函数里，代码更清爽，也更好维护。

不过目前只有 Chrome 支持，可以先用着，不支持的浏览器会回退到默认值。

if() 函数也来了

CSS 本来就有很多条件逻辑，比如选择器匹配、媒体查询。

但这次的 if() 函数是第一个专门做条件分支的：

.grid {
  display: grid;
  grid-template-columns:
    if(
      media(max-width > 300px): repeat(2, 1fr);
      media(max-width > 600px): repeat(3, 1fr);
      media(max-width > 900px): repeat(auto-fit, minmax(250px, 1fr));
      else: 1fr;
    );
}

看起来像不像 switch 语句？第一个匹配的条件会生效。

条件可以是 media()、supports()、style() 这几种。

把所有逻辑都写在一个属性里，代码可读性好很多。

目前 Chrome 独占，其他浏览器还在路上。

表单输入框自动调整大小

field-sizing 这个属性专门解决表单输入框的问题。

textarea {
  field-sizing: content;
}

加上这一行，textarea 会自动根据内容调整高度。

用户输入多少内容，输入框就有多高，不用手动拖拽了。

在手机上体验特别好，拖拽调整大小本来就很难操作。

这个功能之前都是用 JavaScript 实现，现在 CSS 原生支持了。

Chrome 和 Safari 都能用，Firefox 估计也快了。

select 下拉框终于能自定义样式了

select 元素的外观一直很难自定义，打开后显示的选项更是完全没法控制。

现在可以完全自定义了，只要先开启：

select,
::picker(select) {
  appearance: base-select;
}

然后想怎么改就怎么改，选项的样式、布局、动画都能控制。

目前 Chrome 独占，不过不支持的浏览器会回退到原生样式，完全不影响使用。

text-wrap 让排版更好看

text-wrap: balance 可以让每行文字长度尽量接近：

h1 {
  text-wrap: balance;
}

用在标题上效果特别好，不会出现最后一行只有一个词的情况。

还有个 text-wrap: pretty，专门优化正文排版：

p {
  text-wrap: pretty;
}

浏览器会自动调整断行，避免孤词，让文字看起来更舒服。

balance 已经全浏览器支持，pretty 在 Chrome 和 Safari 能用。

这种优化对用户体验很重要，而且完全不影响功能，可以直接加上。

linear() 实现复杂缓动效果

CSS 的 linear 关键字之前就是匀速动画，很无聊。

但 linear() 函数可以实现超复杂的缓动，比如弹跳效果：

.bounce {
  animation-timing-function: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
    1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
    0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
    0.973, 1, 0.988, 0.984, 0.988, 1
  );
}

这种效果用 cubic-bezier() 根本做不出来。

而且已经全浏览器支持了，可以放心用。

有在线工具可以生成这些值，不用自己手写。

shape() 函数画任意图形

CSS 之前有 path() 函数，但语法很难写，而且只能用像素。

shape() 是专门为 CSS 设计的，支持所有单位和自定义属性：

.arrow {
  clip-path: shape(
    evenodd from 97.788201% 41.50201%,
    line by -30.839077% -41.50201%,
    curve by -10.419412% 0% with -2.841275% -3.823154% / -7.578137% -3.823154%,
    smooth by 0% 14.020119% with -2.841275% 10.196965%,
    close
  );
}

可以用在 clip-path 裁剪元素，也能用在 offset-path 做路径动画。

而且可以响应式调整，配合媒体查询和容器查询都没问题。

Chrome 和 Safari 已经支持，Firefox 也在开发中。

attr() 变强了

之前 attr() 只能取字符串，现在可以指定类型了：

<div data-count="42" data-color="#ff0000">

div {
  --count: attr(data-count type(<number>));
  --color: attr(data-color type(<color>));
}

这样可以直接把 HTML 属性当数字或颜色用，方便多了。

目前 Chrome 独占，不过对于不支持的浏览器，可以设置回退值。

reading-flow 解决 Tab 顺序问题

用 Grid 或 Flexbox 重新排列元素后，Tab 键的焦点顺序会乱。

现在可以用 reading-flow 告诉浏览器按照视觉顺序来：

.grid {
  reading-flow: grid-rows;
}

这样焦点就会按照 Grid 的行顺序移动，不会乱跳了。

Flexbox 用 flex-flow，其他布局也有对应的值。

这个功能对无障碍访问很重要，不过目前只有 Chrome 支持。

等其他浏览器跟进之前，最好不要大量重排布局。

值得期待的功能

还有一些功能在开发中，但还没正式发布：

Masonry 布局虽然各浏览器实现不同，但在稳步推进。

Safari 的 random() 函数可以生成随机数，玩起来很有意思。

margin-trim 可以自动去掉容器边缘元素的外边距，Safari 独占中。

sibling-index() 和 sibling-count() 函数在 Chrome 能用，做交错动画很方便。

View Transitions 的 match-element 不用给每个元素起名字了，而且 Firefox 也在开发中。

还有很多其他功能在路上。

别忘了这些已经能用的

Container Queries 和 :has() 这些去年的新功能，现在已经全浏览器支持。

View Transitions、Anchor Positioning、Scroll-Driven Animations 也都在 Safari 上线了。

dvh 这些视口单位也成为标准了。

CSS 现在能做的事情越来越多，写起来也越来越顺手。

参考：https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-2025-edition/

其他好文推荐

2025 最新！独立开发者穷鬼套餐

Windows 安装 Claude Code 的新姿势，保姆级教程

Claude Code 从入门到精通：最全配置指南和工具推荐

Claude Code 终极配置指南：一行命令搞定各种配置

一个配置文件搞定！Claude Code 多模型智能切换

这个 361k Star 的项目，一定要收藏！

搞定 XLSX 预览？别瞎找了，这几个库（尤其最后一个）真香！

【完整汇总】近 5 年 JavaScript 新特性完整总览

关于 Node，一定要学这个 10+万 Star 项目！