CSS if()函数条件样式实战指南：告别冗余代码，实现声明式UI逻辑

多年来，为了实现动态样式，前端开发者们不得不依赖各种变通方案：用 JavaScript 动态切换类名、在 CSS 预处理器中编写复杂的 mixin，或是在样式表中堆叠大量重复的媒体查询。CSS if() 函数的到来，彻底改变了这一局面。它将直观的条件逻辑直接引入到原生 CSS 中，提供了一种优雅、高性能且完全声明式的样式编写方式。

if() 函数如何工作？

其基本语法遵循清晰的逻辑判断流程：

property: if(
  condition-1: value-1;
  condition-2: value-2;
  condition-3: value-3;
  else: default-value
);

函数会按顺序检查每一个条件，并应用第一个匹配成功的值。如果所有条件均不满足，则回退使用 else 子句指定的默认值。这种模式完全符合编程直觉，但现在你可以在纯 CSS 环境中使用它。

if() 函数的三大核心能力

1. 样式查询（Style Queries）

通过 style() 条件，你可以根据 CSS 自定义属性（变量）的值来动态应用样式。

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    style(--status: error): crimson;
    else: gray
  );
}

现在，仅需修改 HTML 元素上的 data-status 属性，即可驱动整套视觉变化，无需再编写或切换大量的工具类（Utility Classes）。

2. 媒体查询（Media Queries）

告别在文件不同位置重复编写媒体查询的混乱。使用 media() 条件，你可以直接在属性内部定义响应式值。

h1 {
  font-size: if(
    media(width >= 1200px): 3rem;
    media(width >= 768px): 2.5rem;
    media(width >= 480px): 2rem;
    else: 1.75rem
  );
}

3. 特性检测（Feature Detection）

无需再为 CSS 新特性编写冗长的回退方案并祈祷其正常工作。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)
  );
}

真实应用场景示例

三行代码实现暗色模式

body {
  --theme: "dark"; /* 可通过 JavaScript 或 prefers-color-scheme 媒体查询切换 */
  background: if(
    style(--theme: "dark"): #1a1a1a;
    else: white
  );
  color: if(
    style(--theme: "dark"): #e4e4e4;
    else: #333
  );
}

设计系统中的状态化组件

.alert {
  --type: attr(data-type type(<custom-ident>));
  background: if(
    style(--type: success): #d4edda;
    style(--type: warning): #fff3cd;
    style(--type: danger): #f8d7da;
    style(--type: info): #d1ecf1;
    else: #f8f9fa
  );
  border-left: 4px solid if(
    style(--type: success): #28a745;
    style(--type: warning): #ffc107;
    style(--type: danger): #dc3545;
    style(--type: info): #17a2b8;
    else: #6c757d
  );
}

简洁的容器响应式布局

无需再让媒体查询打乱样式表的结构，响应式设计的逻辑可以更内聚。

.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
  );
}

与现代 CSS 新特性结合

if() 函数可以与其他现代 CSS 功能协同工作，创造出更强大的样式逻辑。

.element {
  /* 与 light-dark() 函数配合 */
  color: if(
    style(--high-contrast: true): black;
    else: light-dark(#333, #e4e4e4)
  );
  /* 与 CSS 自定义函数 (@function) 配合 */
  padding: if(
    style(--spacing: loose): --spacing-function(2);
    style(--spacing: tight): --spacing-function(0.5);
    else: --spacing-function(1)
  );
}

浏览器支持与渐进增强策略

截至2025年8月，各浏览器支持情况如下：

• ✅ Chrome/Edge：137+
• ✅ Chrome Android：139+
• 🔄 Firefox：正在开发中
• 🔄 Safari：已在规划路线图中
• ❌ Opera：暂未支持

在浏览器支持度仍在扩大的现阶段，可以采用渐进增强的模式编写代码，确保所有用户都能获得可用的体验：

.button {
  /* 所有浏览器的回退样式 */
  padding: 1rem 2rem;
  background: #007bff;

  /* 支持 if() 的现代浏览器会自动覆盖以下值 */
  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
  );
}

未来展望

CSS 工作组已在规划 if() 函数的进一步扩展，未来可能包括：

• 范围判断：例如 if(style(--value > 100): ...)
• 逻辑操作符：例如 if(style(--a: true) and style(--b: false): ...)
• 更深的容器查询集成：提供更强的上下文感知样式能力。

if() 函数标志着 CSS 正朝着更强大、更声明式的样式逻辑控制方向迈进，有望显著简化复杂 UI 状态的样式代码。