CSS 也要支持 if 了 ！！！CSS if() 函数来了！

是的！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
    );
  }
}

@supports not (color: if(style(--test: ok): red)) {
  /* 回退方案 */
  .element {
    color: var(--fallback-color, black);
  }
}

你现在最想用 if() 解决什么痛点？
是暗黑模式、响应式排版、主题切换，还是其他场景？
可以告诉我，我给你写个针对性的例子！