是的CSS 终于拥有了原生的if()函数这确实是 2025 年 CSS 领域最重磅的功能之一被很多人称为“CSS 迎来条件逻辑的时代”。它让 CSS 第一次可以直接在属性值上写内联条件判断不再需要一堆媒体查询、类切换、JS 注入样式或者复杂的:has()/ 容器查询 workaround。1.if()函数是什么什么时候来的正式名称if()CSS Values and Units Module Level 5 草案的一部分首次落地Chrome 1372025 年中期稳定版当前状态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暗黑模式 自动 fallbackbutton{background:if(media(prefers-color-scheme:dark):#333;else:#007bff);color:white;}示例 4根据容器大小结合 container queriescontainer(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 / styleCSS 预处理器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()解决什么痛点是暗黑模式、响应式排版、主题切换还是其他场景可以告诉我我给你写个针对性的例子