大家好，我是 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 项目！
)
