CSS 也要支持 if 了 ！！！CSS if() 函数来了！
CSS if() 函数允许在纯 CSS 中基于条件为属性赋值，无需 JavaScript 或预处理器。该函数已在 Chrome 137 发布。
过去常用的做法包括通过 JavaScript 切换类名、使用预处理器 mixin 或编写大量媒体查询。if() 将条件逻辑引入 CSS，使写法更直接、性能稳定。
原文 CSS 也要支持 if 了 ！！！CSS if() 函数来了！
工作原理
property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: default-value);
函数按顺序检查条件并应用第一个匹配的值；若没有条件匹配，则使用 else 的值。这一语义与常见编程语言一致，但实现于纯 CSS。
if() 的三种能力
样式查询（Style queries）
使用 style() 可响应 CSS 自定义属性：
.card {--status: attr(data-status type(<custom-ident>));border-color: if(style(--status: pending): royalblue; style(--status: complete): seagreen; style(--status: error): crimson; else: gray);
}
一个 data-status 属性即可驱动对应样式，无需额外工具类。
媒体查询（Media queries）
使用 media() 可以在属性内联定义响应式值，无需嵌套媒体查询块：
h1 {font-size: if(media(width >= 1200px): 3rem; media(width >= 768px): 2.5rem; media(width >= 480px): 2rem; else: 1.75rem);
}
特性检测（Feature detection）
使用 supports() 可在属性中直接进行特性检测，并提供明确回退：
.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: 'dark'; /* 通过 JavaScript 或用户偏好切换 */background: if(style(--theme: 'dark'): #1a1a1a; else: white);color: if(style(--theme: 'dark'): #e4e4e4; else: #333);
}
设计系统状态组件
.alert {--type: attr(data-type 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);
}
容器尺寸示例（简化媒体查询）
.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);
}
与现代 CSS 特性结合
.element {/* 搭配新的 light-dark() 函数 */color: if(style(--high-contrast: true): black; else: light-dark(#333, #e4e4e4));/* 搭配 CSS 自定义函数（@function） */padding: if(style(--spacing: loose): --spacing-function(2) ; style(--spacing: tight): --spacing-function(0.5) ; else: --spacing-function(1));
}
浏览器支持
支持情况（截至 2025 年 8 月）：
- ✅ Chrome/Edge：自 137 版起
- ✅ Chrome Android：自 139 版起
- ❌ Firefox：开发中
- ❌ Safari：在规划中
- ❌ Opera：尚未支持
在尚未完全支持的环境中，可采用如下写法：
.button {/* 所有浏览器的回退 */padding: 1rem 2rem;background: #007bff;/* 现代浏览器会自动覆盖 */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 工作组已经在推进扩展能力：
- 范围查询：
if(style(--value > 100): ...) - 逻辑运算符：
if(style(--a: true) and style(--b: false): ...) - 容器查询集成：更强的上下文感知
在使用前建议评估目标浏览器版本，并准备相应回退方案。
