说起来有点好笑。我们整天用 JavaScript 写 if (condition) { doSomething() }，觉得理所当然，但回到 CSS 这边，一个“根据条件应用不同样式”的需求，折腾了十几年也没个正经解法。
早期靠“类名开关”——状态变了就增删 className，维护起来像打补丁。后来有了 CSS 变量，能稍微灵活一点，但真要判断个条件还是力不从心。于是一大批人转头投奔 Sass、Less，在预处理器里用 @if 过把瘾——但那是编译时的东西，运行时条件？不存在的。
2025 年 5 月，Chrome 137 稳定版发布，带上了 if() 函数。CSS 终于原生支持条件逻辑了。
基础语法
if() 函数的语法长这样：
css
property: if(条件1: 值1; 条件2: 值2; else: 默认值);
目前支持三种条件类型：style()（基于 CSS 自定义属性判断）、media()（媒体查询）、supports()（特性检测）。
看个最直观的例子。以前想根据某个状态变量切换背景色，得用类名配合样式覆盖。现在可以直接在属性里判断：
css
.card {
--status: attr(data-status type(<custom-ident>));
background-color: if(
style(--status: proposed): #e8f0fe;
style(--status: assigned): #fef7e0;
style(--status: complete): #e6f4ea;
else: #f1f3f4
);
}
配合 HTML 的 data-status="complete"，背景色自动变化，不需要 JavaScript 插手。过去要在 CSS 里实现这种逻辑，要么预编译，要么写一堆冗余选择器，现在一句 if() 搞定。
内联媒体查询
另一个常见场景是响应式。以前写响应式，相关样式要散落在不同的 @media 代码块里，维护起来割裂感很强。if() 允许把媒体查询内联到属性声明中：
css
button {
aspect-ratio: 1;
width: if(media(any-pointer: fine): 30px; else: 44px);
}
这段代码的意思是：在鼠标设备上按钮宽 30px，在触屏设备上（手指触摸目标需要更大尺寸）宽 44px。逻辑内聚，一眼就能看出这行样式在不同设备下的表现。
也可以把 if() 用在伪元素的内容上，根据浏览器特性支持显示不同提示：
css
body::after {
content: if(
supports(color: oklch(0.7 0.185 232)): "你的浏览器支持 OKLCH";
else: "你的浏览器不支持 OKLCH"
);
}
真正的变革：运行时条件
预处理器里的 @if 和原生 if() 的核心区别在于：前者在编译时就固定了输出，后者在浏览器渲染时动态计算。
这意味着样式可以根据用户操作、设备状态、自定义属性的变化实时响应，且完全不需要 JavaScript 介入。这不仅仅是少写几行 JS 的事，它改变了 CSS 的思维模型——从“静态规则集”变成了“有逻辑表达能力”的样式语言。
社区对这个特性的反应挺有意思。有人在 InfoQ 的报道下吐槽语法“看起来像三目运算符裹了层糖衣”。也有人像 Theo Browne 说的那样，觉得“CSS 的未来从未如此光明”——尤其是在大型样式系统中，条件逻辑内聚在声明内部，比起传统方法里一个伪类放错位置就可能破坏 UI，风险低了不少。
现实问题：浏览器兼容性
不过得泼盆冷水。
截至 2026 年 9 月，if() 函数基本只在 Chrome 137+ 可用，Firefox 和 Safari 的跟进还没明确时间表。这个局面和几年前 CSS 容器查询刚推出时很像——Chrome 先跑起来，其他浏览器慢慢追。
所以目前的生产项目，用之前得掂量一下用户画像。如果主要受众在用最新 Chrome（比如一些内部工具、技术演示类项目），可以大胆尝鲜。如果是面向大众的 C 端产品，稳妥起见还是加个 fallback：
css
.card {
background-color: #f1f3f4; /* 降级方案 */
background-color: if(
style(--status: complete): #e6f4ea;
else: #f1f3f4
);
}
不止 if()，CSS 逻辑能力在整体升级
if() 只是这一波 CSS “逻辑化”浪潮的一个缩影。@function 自定义函数允许定义可复用的计算逻辑，@starting-style 解决了元素首次渲染时过渡动画的“无中生有”问题，@scope 让样式作用域有了原生控制手段。
前端圈子这几年有个隐约的趋势：CSS 正在从“样式描述语言”往“更完整的样式逻辑语言”进化。预处理器曾经填补的空白，正在被原生能力一块块填回来。对开发者来说，这意味着更少的构建工具配置、更直接的调试体验，以及——某种意义上——CSS 终于被当作一门正经语言来设计了。
至于什么时候能在生产环境全面铺开？那得看 Safari 和 Firefox 的进度了。不过，先在个人项目或内部工具里玩起来，总归不亏。
