CSS if() 函数：用条件逻辑简化样式编写

现在，css 有了一个很有用的新功能：if() 函数。它能让你根据条件直接设置 CSS 属性，不需要写 JavaScript，也不需要用预处理器。这个功能已经在 Chrome 137 版本中正式支持。

过去，我们要根据条件改变样式，只能想各种办法。比如用 JavaScript 切换类名，或者用 Sass 这样的预处理器，再不然就是写很多重复的媒体查询。if() 函数解决了这些问题，让条件逻辑直接成为 CSS 的一部分。

if() 函数怎么用

基本语法是这样的：

属性名: if(
  条件1: 值1;
  条件2: 值2;
  条件3: 值3;
  else: 默认值
);

这个函数会按顺序检查每个条件，使用第一个匹配的条件对应的值。如果没有条件匹配，就用 else 后面的值。这和其他编程语言里的 if-else 逻辑很像，但现在是在纯 CSS 里使用。

三种主要用途

1. 根据 html 属性设置样式

可以用 style() 来根据 HTML 元素的属性值设置不同样式：

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

在 HTML 里，只需要改变>

<div class="card" >="pending">待处理</div>
<div class="card" >="complete">已完成</div>

2. 响应式设计

做响应式布局时，不用再写一堆媒体查询了：

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

3. 浏览器特性检测

可以检查浏览器是否支持某个 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)  
  );
}

实际使用例子

暗黑模式切换

用三行代码就能实现暗黑模式：

body {
  --theme: "light"; /* 可以用 JavaScript 切换这个值 */

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

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

用 JavaScript 切换主题：

// 切换到暗黑模式
document.documentElement.style.setProperty('--theme', 'dark');

// 切换回亮色模式
document.documentElement.style.setProperty('--theme', 'light');

状态提示组件

制作各种状态的提示框：

.alert {
  --type: attr(>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
  );
}

HTML 使用：

<div class="alert" >="success">操作成功！</div>
<div class="alert" >="warning">请注意！</div>

响应式容器

根据不同屏幕宽度设置不同尺寸：

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

兼容性处理

目前浏览器支持情况：

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 功能

.element {
  /* 结合 light-dark() 函数 */
  color: if(
    style(--high-contrast: true): black;
    else: light-dark(#333, #e4e4e4)
  );
}

处理用户偏好

.text {
  font-size: if(
    media(scripting: none): 1.2rem; /* 没有 JavaScript 时用大字号 */
    else: 1rem
  );
}

为什么 if() 函数有用

代码更简洁
以前要写很多媒体查询或工具类，现在只需要一个 if() 函数。

维护更方便
相关样式都在一起，不用在文件里跳来跳去找对应的媒体查询。

性能更好
浏览器原生支持，比用 JavaScript 切换样式更高效。

开始使用建议

可以先在不太重要的样式上试用 if() 函数。比如按钮的不同状态，或者简单的响应式布局。

记得始终提供回退方案，确保不支持的浏览器也能正常显示。

未来展望

CSS 工作组还在继续改进这个功能，可能会加入：

数值比较：if(style(--value > 100): ...)
逻辑运算：if(style(--a: true) and style(--b: false): ...)
更好的容器查询集成

if() 函数让 CSS 变得更强大。它让样式编写更接近编程逻辑，但保持了 CSS 的声明式特点。对于需要根据不同条件显示不同样式的项目来说，这是个很有用的工具。

现在你可以在支持它的浏览器中尝试这个功能，让你的样式表更简洁、更易维护。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12934