是的！CSS 终于拥有了原生的 if() 函数，这确实是 2025 年 CSS 领域最重磅的功能之一，被很多人称为“CSS 迎来条件逻辑的时代”。
它让 CSS 第一次可以直接在属性值上写内联条件判断，不再需要一堆媒体查询、类切换、JS 注入样式，或者复杂的 :has() / 容器查询 workaround。
1. if() 函数是什么？什么时候来的？
- 正式名称：
if()（CSS Values and Units Module Level 5 草案的一部分） - 首次落地：Chrome 137（2025 年中期稳定版）
- 当前状态（2026 年初）：主要在 Chromium 系（Chrome、Edge、Opera、Brave 等）可用，Firefox 和 Safari 还在开发/实验阶段（MDN 标注为实验性功能）
- 核心作用：根据条件动态选择属性值，语法类似三元运算符 + 多条件分支
2. 基本语法（最常用形式）
property: if(条件1: 值1; 条件2: 值2; ...; else: 默认值);- 条件按顺序匹配，第一个匹配的条件生效
- 没有匹配 → 走
else分支（可选） - 没有
else且全不匹配 → 属性保持未定义状态（fallback 到其他规则）
目前支持的条件类型（最实用的是这三种）：
style(--var: 值)→ 检查自定义属性（CSS 变量）的值media(媒体查询)→ 内联媒体查询supports(特性)→ 检查浏览器是否支持某个 CSS 特性
3. 真实可用的例子（2026 年最常见玩法）
示例 1：根据主题变量切换颜色
:root {
--theme: light;
}
body {
background: if(
style(--theme: dark): #121212;
style(--theme: light): #f8f9fa;
else: #ffffff
);
color: if(
style(--theme: dark): #e0e0e0;
else: #212529
);
}JS 切换主题时只需改 --theme 变量，CSS 自动响应。
示例 2：内联媒体查询（再也不用一堆 @media 块）
.card {
padding: if(
media(max-width: 600px): 12px;
media(max-width: 900px): 20px;
else: 32px
);
font-size: if(
media(max-width: 600px): 14px;
media((min-width: 601px) and (max-width: 900px)): 16px;
else: 18px
);
}示例 3：暗黑模式 + 自动 fallback
button {
background: if(
media(prefers-color-scheme: dark): #333;
else: #007bff
);
color: white;
}示例 4：根据容器大小（结合 container queries）
@container (min-width: 400px) {
.list {
grid-template-columns: if(
style(--items: many): repeat(4, 1fr);
else: repeat(2, 1fr)
);
}
}4. 为什么大家这么激动？
以前想实现类似逻辑，只能靠：
- 大量
@media/@container块（代码膨胀） :has()+ 变体类（hack 感强）- JS 动态加 class / style
- CSS 预处理器（Sass/LESS）的 if，但那是编译时，不是运行时
现在 if() 让条件直接写在属性上，声明式、性能好、可读性强。
5. 当前限制 & 注意事项（2026 年初真实情况）
- 浏览器支持：Chromium 系基本可用，Safari / Firefox 还在跟进（用
@supports if()做 feature detection） - 条件类型：目前最稳定的是
style()检查 CSS 变量 - 不能直接用普通属性或
attr()做条件（只能是自定义属性） - 嵌套：可以嵌套
if()，但要小心可读性 - 性能：非常好（浏览器原生解析），比 JS 切换 class 更快
6. 快速上手模板（复制即用）
@supports (color: if(style(--test: ok): red)) {
/* 支持 if() 的写法 */
.element {
color: if(
style(--mode: dark): white;
style(--mode: light): black;
else: gray
);
}
}
@supports not (color: if(style(--test: ok): red)) {
/* 回退方案 */
.element {
color: var(--fallback-color, black);
}
}你现在最想用 if() 解决什么痛点？
是暗黑模式、响应式排版、主题切换，还是其他场景？
可以告诉我，我给你写个针对性的例子！
