如果 CSS 能像 JavaScript 一样进行条件判断会怎样？
你可能会想，只是个条件判断，能有什么用？
那你就太小瞧这个功能了！
这篇文章带你展示它的强大。
PS：目前 CSS if() 函数已在 Chrome 137 中正式发布。
1. 基本用法
property:if(condition-1:value-1;condition-2:value-2;condition-3:value-3;else:default-value);函数会按顺序检查条件并应用第一个匹配的值。如果没有条件匹配，则使用 else 值。
2. 3 大使用场景
2.1. 深色模式
以前实现深色模式，要么用 JavaScript 切换 class，要么写两套样式。
现在你可以直接这样写：
body{--theme:"dark";/* 通过 JavaScript 或用户偏好切换 */background:if(style(--theme:"dark"):#1a1a1a;else:white);color:if(style(--theme:"dark"):#e4e4e4;else:#333);}2.2. 响应式布局
以前写响应式：
.container{width:100%;}@media(min-width:576px){.container{width:540px;}}@media(min-width:768px){.container{width:720px;}}@media(min-width:992px){.container{width:960px;}}/* 还有更多... */现在你可以这样写：
.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);}代码更优雅，性能更快，维护起来也方便。
2.3. 优雅降级
假设你想用最新的颜色函数lch()，但又担心旧浏览器不支持。以前你可能要这样写：
.element{border-color:rgb(200,100,50);/* 兜底方案 */border-color:lch(50% 100 150);/* 新浏览器会覆盖 */}现在可以用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));}浏览器会按顺序检查：支持lch()就用lch()，不支持就看看支持不支持lab()，都不支持就用传统的rgb()。
3. 浏览器支持度
截至 2025 年 8 月：
✅ Chrome/Edge：从版本 137 开始
✅ Chrome Android：从版本 139 开始
❌ Firefox：开发中
❌ Safari：在路线图上
❌ Opera：尚未支持
所以如果你现在就想用，记得写好 fallback：
.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);}4. 技术在进步
写到这里，我想起自己刚学前端那会儿。
每次看到新技术出来，就觉得“完了，我又落后了”。
后来慢慢发现，技术是用来解决问题的，不是用来制造焦虑的。
CSSif()函数确实很酷，但它解决的问题——条件判断、响应式布局、浏览器兼容——这些问题我们用现有的方法也能解决，只是可能麻烦一点。
新技术的意义，不是让你觉得“我必须马上学会”，而是让你知道“原来还可以这样做”。
所以，如果你现在项目里用不上if()函数，没关系。把它收藏起来，等哪天浏览器支持好了，或者你遇到了它能解决的问题，再拿出来用。
前端学习是个长跑，不是短跑。慢慢来，别着急。
我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。
欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。
)
