CSS if() 函数来了！ ​

CSS if() 函数允许在纯 CSS 中基于条件为属性赋值，无需 JavaScript 或预处理器。该函数已在 Chrome 137 发布。

过去常用的做法包括通过 JavaScript 切换类名、使用预处理器 mixin 或编写大量媒体查询。if() 将条件逻辑引入 CSS，使写法更直接、性能稳定。

工作原理 ​

css
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 自定义属性：

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

一个 data-status 属性即可驱动对应样式，无需额外工具类。

2. 媒体查询（Media queries） ​

使用 media() 可以在属性内联定义响应式值，无需嵌套媒体查询块：

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

3. 特性检测（Feature detection） ​

使用 supports() 可在属性中直接进行特性检测，并提供明确回退：

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

真实用例 ​

暗色模式示例 ​

css
body {
  --theme: 'dark'; /* 通过 JavaScript 或用户偏好切换 */

  background: if(style(--theme: 'dark'): #1a1a1a; else: white);

  color: if(style(--theme: 'dark'): #e4e4e4; else: #333);
}

设计系统状态组件 ​

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

容器尺寸示例（简化媒体查询） ​

css
.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 特性结合 ​

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：尚未支持

在尚未完全支持的环境中，可采用如下写法：

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

未来展望 ​

CSS 工作组已经在推进扩展能力：

  • 范围查询：if(style(--value > 100): ...)
  • 逻辑运算符：if(style(--a: true) and style(--b: false): ...)
  • 容器查询集成：更强的上下文感知

在使用前建议评估目标浏览器版本，并准备相应回退方案。

CatchAdmin
后端开发工程师，前端入门选手，略知相关服务器知识，偏爱❤️ Laravel & Vue
CatchAdmin 是一个功能强大、易于扩展的现代化 PHP 后台管理系统。它采用前后端分离架构：后端基于强大的 PHP 框架 Laravel，纯粹提供 API 接口；前端则拥抱现代技术栈，使用 Vue 3 和 Element Plus 构建用户界面。 通过精心的模块化设计，CatchAdmin 极大地降低了后台管理系统中各个模块的耦合度，为开发者提供了灵活、高效的二次开发体验。无论您是需要快速搭建一个 PHP 后台系统，还是寻找一个坚实的 PHP 后台框架 作为项目起点，CatchAdmin 是一个理想的选择
本作品采用《CC 协议》，转载必须注明作者和本文链接