现在，CSS 有了一个很有用的新功能：if() 函数。它能让你根据条件直接设置 CSS 属性，不需要写 JavaScript，也不需要用预处理器。这个功能已经在 Chrome 137 版本中正式支持。
过去，我们要根据条件改变样式，只能想各种办法。比如用 JavaScript 切换类名，或者用 Sass 这样的预处理器，再不然就是写很多重复的媒体查询。if() 函数解决了这些问题，让条件逻辑直接成为 CSS 的一部分。
if() 函数怎么用
基本语法是这样的：
属性名: if(
条件1: 值1;
条件2: 值2;
条件3: 值3;
else: 默认值
);这个函数会按顺序检查每个条件，使用第一个匹配的条件对应的值。如果没有条件匹配，就用 else 后面的值。这和其他编程语言里的 if-else 逻辑很像，但现在是在纯 CSS 里使用。
三种主要用途
1. 根据 HTML 属性设置样式
可以用 style() 来根据 HTML 元素的属性值设置不同样式：
.card {
--status: attr(>type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
style(--status: error): crimson;
else: gray
);
}在 HTML 里，只需要改变>
<div class="card" >="pending">待处理</div>
<div class="card" >="complete">已完成</div>2. 响应式设计
做响应式布局时，不用再写一堆媒体查询了：
h1 {
font-size: if(
media(width >= 1200px): 3rem;
media(width >= 768px): 2.5rem;
media(width >= 480px): 2rem;
else: 1.75rem
);
}3. 浏览器特性检测
可以检查浏览器是否支持某个 CSS 功能：
.element {
border-color: if(
supports(color: lch(0 0 0)): lch(50% 100 150);
supports(color: lab(0 0 0)): lab(50 100 -50);
else: rgb(200, 100, 50)
);
}实际使用例子
暗黑模式切换
用三行代码就能实现暗黑模式：
body {
--theme: "light"; /* 可以用 JavaScript 切换这个值 */
background: if(
style(--theme: "dark"): #1a1a1a;
else: white
);
color: if(
style(--theme: "dark"): #e4e4e4;
else: #333
);
}用 JavaScript 切换主题：
// 切换到暗黑模式
document.documentElement.style.setProperty('--theme', 'dark');
// 切换回亮色模式
document.documentElement.style.setProperty('--theme', 'light');状态提示组件
制作各种状态的提示框：
.alert {
--type: attr(>type(<custom-ident>));
background: if(
style(--type: success): #d4edda;
style(--type: warning): #fff3cd;
style(--type: danger): #f8d7da;
style(--type: info): #d1ecf1;
else: #f8f9fa
);
border-left: 4px solid if(
style(--type: success): #28a745;
style(--type: warning): #ffc107;
style(--type: danger): #dc3545;
style(--type: info): #17a2b8;
else: #6c757d
);
}HTML 使用：
<div class="alert" >="success">操作成功！</div>
<div class="alert" >="warning">请注意！</div>响应式容器
根据不同屏幕宽度设置不同尺寸：
.container {
width: if(
media(width >= 1400px): 1320px;
media(width >= 1200px): 1140px;
media(width >= 992px): 960px;
media(width >= 768px): 720px;
media(width >= 576px): 540px;
else: 100%
);
padding-inline: if(
media(width >= 768px): 2rem;
else: 1rem
);
}兼容性处理
目前浏览器支持情况：
Chrome/Edge：137 版本以上支持
Chrome Android：139 版本以上支持
Firefox：还在开发中
Safari：计划支持
Opera：还不支持
因为不是所有浏览器都支持，可以这样写来保证兼容：
.button {
/* 所有浏览器都能用的默认值 */
padding: 1rem 2rem;
background: #007bff;
/* 支持 if() 的浏览器会使用这些值 */
padding: if(
style(--size: small): 0.5rem 1rem;
style(--size: large): 1.5rem 3rem;
else: 1rem 2rem
);
background: if(
style(--variant: primary): #007bff;
style(--variant: success): #28a745;
style(--variant: danger): #dc3545;
else: #6c757d
);
}使用技巧
组合使用其他 CSS 功能
.element {
/* 结合 light-dark() 函数 */
color: if(
style(--high-contrast: true): black;
else: light-dark(#333, #e4e4e4)
);
}处理用户偏好
.text {
font-size: if(
media(scripting: none): 1.2rem; /* 没有 JavaScript 时用大字号 */
else: 1rem
);
}为什么 if() 函数有用
代码更简洁
以前要写很多媒体查询或工具类，现在只需要一个 if() 函数。
维护更方便
相关样式都在一起，不用在文件里跳来跳去找对应的媒体查询。
性能更好
浏览器原生支持，比用 JavaScript 切换样式更高效。
开始使用建议
可以先在不太重要的样式上试用 if() 函数。比如按钮的不同状态，或者简单的响应式布局。
记得始终提供回退方案，确保不支持的浏览器也能正常显示。
未来展望
CSS 工作组还在继续改进这个功能，可能会加入：
数值比较：if(style(--value > 100): ...)
逻辑运算：if(style(--a: true) and style(--b: false): ...)
更好的容器查询集成
if() 函数让 CSS 变得更强大。它让样式编写更接近编程逻辑，但保持了 CSS 的声明式特点。对于需要根据不同条件显示不同样式的项目来说，这是个很有用的工具。
现在你可以在支持它的浏览器中尝试这个功能，让你的样式表更简洁、更易维护。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！