当前位置：首页 > news >正文

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

news 2026/6/10 16:08:18

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

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

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

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

工作原理

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

函数按顺序检查条件并应用第一个匹配的值；若没有条件匹配，则使用 else 的值。这一语义与常见编程语言一致，但实现于纯 CSS。

if() 的三种能力

样式查询（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);
}

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

媒体查询（Media queries）

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

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

特性检测（Feature detection）

使用 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 或用户偏好切换 */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 特性结合

.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;/* 现代浏览器会自动覆盖 */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);
}