我没想到 CSS if 函数这么强

[mqyqingfeng]

如果 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. 技术在进步

写到这里，我想起自己刚学前端那会儿。

每次看到新技术出来，就觉得“完了，我又落后了”。

后来慢慢发现，技术是用来解决问题的，不是用来制造焦虑的。

CSS if() 函数确实很酷，但它解决的问题——条件判断、响应式布局、浏览器兼容——这些问题我们用现有的方法也能解决，只是可能麻烦一点。

新技术的意义，不是让你觉得“我必须马上学会”，而是让你知道“原来还可以这样做”。

所以，如果你现在项目里用不上 if() 函数，没关系。把它收藏起来，等哪天浏览器支持好了，或者你遇到了它能解决的问题，再拿出来用。

前端学习是个长跑，不是短跑。慢慢来，别着急。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。