CSS重大更新：现在可以用if写条件样式了
很长一段时间里，css都被认为是一门"不太智能"的语言。它没有真正的变量（以前确实没有），没有逻辑判断，很多动态效果都要靠JavaScript或者复杂的媒体查询来实现。
但这种情况正在改变。从2024年开始，CSS的发展速度明显加快。在容器查询、CSS变量这些新功能普及之后，又一个让人兴奋的特性来了：
CSS内联条件判断——if()函数
没错，现在CSS也能写if条件判断了。而且这不是Sass那种需要编译的预处理，而是浏览器原生支持的功能。
if()函数到底是什么？
简单来说，if()让你能在CSS属性值里面写条件判断。浏览器会根据条件是否成立，决定使用哪个样式值。
看个例子：
div {
background: if(
media(width > 800px): lightblue;
else: pink;
);
}这段代码的意思是：
如果窗口宽度大于800像素，背景就是浅蓝色
否则，背景就是粉色
要是在以前，你得这样写：
div {
background: pink;
}
@media (min-width: 800px) {
div {
background: lightblue;
}
}现在，一行代码就搞定了。
if()函数的基本语法
if()的写法很统一：
属性: if(
条件1: 值1;
条件2: 值2;
...
else: 默认值;
)几个需要注意的地方：
条件按顺序检查，第一个满足的条件会被采用
条件可以是媒体查询、特性支持检查或者样式环境查询
else是可选的，但最好都写上
最终结果是一个具体的值，不是一整套样式规则
这就是它和传统媒体查询最大的不同。
三种条件判断方式
1. media() - 媒体查询条件
直接在属性里做响应式设计：
p {
font-size: if(
media(width >= 1200px): 20px;
media(width >= 800px): 18px;
else: 16px;
);
}这样写比分开写多个@media块要简洁很多。
2. supports() - 浏览器特性检查
判断浏览器是否支持某个CSS属性：
.box {
display: if(
supports(display: grid): grid;
else: flex;
);
}传统的写法是这样的：
.box {
display: flex;
}
@supports (display: grid) {
.box {
display: grid;
}
}新的写法明显更直接。
3. style() - 用CSS变量做判断
这个功能特别有用，可以用变量来控制样式：
:root {
--theme: dark;
}
body {
color: if(
style(--theme: dark): #eee;
style(--theme: light): #222;
else: #333;
);
}现在切换主题不需要额外加class，也不用JavaScript，纯CSS就能完成。
实际应用：主题切换功能
假设我们有一个组件，支持三种不同的主题：ice（冰）、fire（火）和默认主题。
.card {
--scheme: ice;
background: if(
style(--scheme: ice): linear-gradient(#caf0f8, white);
style(--scheme: fire): linear-gradient(#ffc971, white);
else: #eee;
);
border: if(
style(--scheme: ice): 1px solid #90e0ef;
style(--scheme: fire): 1px solid #ff9e00;
else: 1px solid #ddd;
);
}要切换主题，只需要改变变量的值：
.card {
--scheme: fire; /* 瞬间切换到火焰主题 */
}组件级的主题切换变得非常简单。
响应式布局的简化
以前做响应式布局要写很多媒体查询，现在可以大大简化：
.container {
padding: if(
media(width >= 1200px): 2rem;
media(width >= 768px): 1.5rem;
else: 1rem;
);
grid-template-columns: if(
media(width >= 1024px): 1fr 1fr 1fr 1fr;
media(width >= 768px): 1fr 1fr;
else: 1fr;
);
gap: if(
media(width >= 768px): 2rem;
else: 1rem;
);
}浏览器兼容性检查
if()函数还可以用来做特性检测，提供降级方案：
.element {
/* 基础样式，所有浏览器都能用 */
backdrop-filter: blur(10px);
/* 如果浏览器不支持backdrop-filter，使用备用方案 */
background: if(
supports(backdrop-filter: blur(10px)): transparent;
else: rgba(255, 255, 255, 0.9);
);
}和传统写法的对比
| 传统写法 | 新的if()写法 |
|---|---|
| 要写多个@media块 | 在单个属性里判断 |
| 需要多处写备用样式 | 直接用else处理 |
| 靠class或JS切换样式 | 用变量或条件自动判断 |
| 代码分散在不同地方 | 逻辑集中，更清晰 |
CSS第一次真正把逻辑判断能力集成到了单个属性里面。
实际项目中的应用场景
按钮组件的不同状态
.button {
--variant: primary;
--size: medium;
/* 根据变体设置颜色 */
background: if(
style(--variant: primary): #007bff;
style(--variant: success): #28a745;
style(--variant: danger): #dc3545;
else: #6c757d;
);
/* 根据尺寸设置大小 */
padding: if(
style(--size: large): 1rem 2rem;
style(--size: small): 0.25rem 0.5rem;
else: 0.5rem 1rem;
);
font-size: if(
style(--size: large): 1.25rem;
style(--size: small): 0.875rem;
else: 1rem;
);
}深色模式适配
:root {
--color-scheme: light;
}
.component {
background: if(
style(--color-scheme: dark): #1a1a1a;
else: #ffffff;
);
color: if(
style(--color-scheme: dark): #e0e0e0;
else: #333333;
);
border-color: if(
style(--color-scheme: dark): #444444;
else: #dddddd;
);
}浏览器支持情况
截至2025年初：
Chrome/Edge：已经支持
Firefox/Safari：暂时还不支持
移动端只有Chromium内核的浏览器支持
如果你的项目需要支持Safari，这个功能现在还不能完全依赖。不过可以这样提供降级方案：
.card {
background: #eee; /* 不支持if()的浏览器用这个 */
background: if(...); /* 支持的浏览器会自动覆盖 */
}什么时候开始使用？
推荐在这些情况下优先尝试：
内部管理系统：用户通常使用较新的浏览器
组件库开发：可以提前研究和应用新特性
主题切换功能：简化实现逻辑
复杂的响应式组件：减少代码重复
如果是面向大众的网站，建议再等一段时间，等Safari和Firefox都支持了再大规模使用。
使用建议和注意事项
保持可读性：不要嵌套太多层条件，否则代码很难维护
提供降级方案：确保不支持if()的浏览器也能正常显示
适度使用：不是所有情况都需要用if()，简单的媒体查询有时候更清晰
测试不同场景：在各种条件和变量值下测试样式是否正确应用
总结
CSS if()函数不是要把CSS变成编程语言，而是补全了一个一直缺失的重要能力：在样式值里面表达逻辑判断。
这个功能的出现意味着：
更少的样式嵌套
更少的重复媒体查询代码
更简洁的主题切换实现
组件的样式逻辑更加集中
现在写CSS，真的可以像说话一样："如果窗口宽度大于800像素，就用这个样式，否则用那个样式"。而且这一切都不需要JavaScript的参与。
虽然现在浏览器支持还不够全面，但这个功能代表了CSS未来的发展方向。现在开始学习和尝试，等浏览器支持更完善时，你就能更快地用上这些现代化的开发方式了。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
