使用 CSS if() 函数实现条件样式

CSS 条件样式传统上依赖于媒体查询、容器查询和自定义属性变通方案。新的 CSS if() 函数改变了这一现状，它将内联条件逻辑直接引入到属性值中。截至 2025 年 8 月，此功能在 Chrome 137+、Edge 137+、Chrome for Android 和 Android Browser 中可用，为开发者提供了一种更清洁的动态样式方法。

本文探讨了 if() 函数的语法、三种查询类型，以及展示为什么它正在成为现代 CSS 开发必备工具的实际应用。

理解 CSS if() 函数语法

CSS if() 函数遵循特定的模式，这使其区别于其他 CSS 函数：

property: if(condition: value; else: fallback);

注意分号分隔条件-值对——不是像其他 CSS 函数那样使用逗号。您也可以链接多个条件：

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

该函数要求 if 和开括号之间没有空格。这种严格的语法帮助 CSS 解析器区分单个函数调用内的多个条件。

三种条件查询类型

style() 查询

style() 查询检查当前元素上的自定义属性值：

.button {
  background: if(
    style(--variant: primary): #0066cc;
    else: transparent
  );
}

与容器样式查询不同，if() 内的 style() 直接应用于被样式化的元素——不需要父容器。

media() 查询

媒体查询可以内联工作，消除了对单独规则块的需要：

.nav-item {
  padding: if(
    media(min-width: 768px): 16px 24px;
    else: 8px 12px
  );
}

supports() 查询

直接在属性值内测试 CSS 特性支持：

.container {
  display: if(
    supports(display: grid): grid;
    else: flex
  );
}

实际应用示例：自适应按钮尺寸

让我们创建一个根据用户输入方式调整大小的按钮——这是一个常见的无障碍要求：

button {
  /* 为粗略指针提供触摸友好的尺寸 */
  width: if(media(any-pointer: coarse): 44px; else: 30px);
  height: if(media(any-pointer: coarse): 44px; else: 30px);
  
  /* 相应调整内边距 */
  padding: if(
    media(any-pointer: coarse): 12px 16px;
    else: 8px 12px
  );
  
  /* 保持一致的样式 */
  border-radius: 6px;
  transition: all 0.2s ease;
}

这种方法将所有响应式逻辑与每个属性内联保持，使组件的行为立即清晰，无需在规则块之间跳转。

使用条件样式进行主题切换

设计系统通常需要多个主题。if() 函数在这种模式下表现出色：

:root {
  --theme: ocean; /* 或 forest 或 sunset */
}

.card {
  background: if(
    style(--theme: ocean): #e3f2fd;
    style(--theme: forest): #e8f5e9;
    style(--theme: sunset): #fff3e0;
    else: #ffffff
  );
  
  color: if(
    style(--theme: ocean): #0d47a1;
    style(--theme: forest): #1b5e20;
    style(--theme: sunset): #e65100;
    else: #333333
  );
  
  border: 2px solid if(
    style(--theme: ocean): #1976d2;
    style(--theme: forest): #388e3c;
    style(--theme: sunset): #f57c00;
    else: #cccccc
  );
}

要切换主题，只需更新自定义属性：

.ocean-theme { --theme: ocean; }
.forest-theme { --theme: forest; }
.sunset-theme { --theme: sunset; }

if() 与传统方法的比较

if() 函数相比现有的条件 CSS 模式具有优势：

vs. 媒体查询：

• 将逻辑保持内联，而不是分散在规则块中
• 减少代码重复
• 使组件行为更加透明

vs. 自定义属性切换：

• 更具可读性和明确性
• 无需复杂的 calc() 变通方案
• 代码自文档化

vs. 容器样式查询：

• 直接应用于元素，无需父级依赖
• 单属性条件的语法更简单
• 更适合组件级样式

浏览器支持和实现

目前，CSS if() 函数支持的浏览器包括：

• Chrome 137+
• Edge 137+
• Chrome for Android
• Android Browser

对于不支持的浏览器，继续使用传统方法作为回退。有限的支持意味着生产环境使用需要仔细考虑您的用户群体。

有关详细规范和更新，请参考 MDN Web Docs for the CSS if() Function。

结论

CSS if() 函数代表了条件样式的重大进步。通过将逻辑与属性声明内联，它创建了更易维护和理解的样式表。虽然浏览器支持仍然有限，但该函数在更清洁的主题化、响应式设计和基于状态的样式方面的潜力使其值得在未来项目中探索。

随着浏览器采用率的增长，预计 if() 函数将成为处理条件 CSS 的标准工具，用更清洁、更直观的语法替换许多当前的变通方案。

常见问题

CSS if() 和媒体查询的主要区别是什么？

if() 函数在属性值内内联应用条件，而媒体查询需要单独的规则块。这使相关逻辑保持在一起并减少代码重复。

我可以在 CSS if() 中使用常规 CSS 属性而不是自定义属性吗？

目前，style() 查询只能与 CSS 自定义属性（变量）一起使用。您无法直接检查常规属性，如 background-color 或 width。

如何处理不支持 CSS if() 函数的浏览器？

使用渐进增强。使用传统方法编写基础样式，然后为支持的浏览器添加 if() 函数层。使用 @supports 进行特性检测可以帮助管理这种过渡。

为什么 if() 函数使用分号而不是逗号？

分号帮助 CSS 解析器区分条件-值对，特别是当值本身可能包含逗号时，如 rgb() 颜色或字体堆栈。

我可以嵌套 if() 函数来实现更复杂的逻辑吗？

是的，您可以将 if() 函数相互嵌套以创建决策树，尽管这可能影响可读性。考虑是否更简单的替代方案可能实现相同的结果。