 函数来了！)
是的！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);}}@supportsnot(color:if(style(--test:ok):red)){/* 回退方案 */.element{color:var(--fallback-color,black);}}你现在最想用if()解决什么痛点？
是暗黑模式、响应式排版、主题切换，还是其他场景？
可以告诉我，我给你写个针对性的例子！
