CSS if() 函数已经来了！

最新推荐文章于 2025-11-30 23:12:20 发布

原创最新推荐文章于 2025-11-30 23:12:20 发布 · 954 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

多年来，我们一直依赖于各种变通方法：JavaScript 切换类、CSS 预处理器混合宏，或者无休止的媒体查询块。if() 函数彻底解决了这些问题，将条件逻辑直接引入 CSS——优雅、高效且声明式。

想象一下，能够直接根据条件设置 CSS 属性——无需 JavaScript，无需预处理器，也无需任何变通方法。而有了 CSS 中新的 if() 函数，这一切现在都在慢慢变成了现实。CSS if() 函数已在 Chrome 137 中正式发布。

工作原理：

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

该函数按顺序检查条件并应用第一个匹配的值。如果没有条件匹配，则使用 else 值——这与编程语言的预期完全一致，但现在是纯 CSS 的。

if() 函数的三大功能

1. 样式查询

使用 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 属性现在即可控制所有样式——无需再使用其他工具类！

2. 媒体查询

告别嵌套的媒体查询块。使用 media()，您可以内联定义响应式值：

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

3. 功能检测

那些依靠随机回退策略并希望一切顺利的日子已经一去不复返了😬。有了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"; /* Toggle via JavaScript or User Preference */


  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 {
  /* With the new light-dark() function */
  color: if(
    style(--high-contrast: true): black;
    else: light-dark(#333, #e4e4e4)
  );


  /* With CSS Custom Functions (@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 {
  /* Fallback for all browsers */
  padding: 1rem 2rem;
  background: #007bff;


  /* Modern browsers automatically override */
  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
  );
}