从 Chrome 137 开始，CSS 引入了一个全新的函数 —— if()，让我们可以在样式里写 if / else 逻辑了！
为什么会关注 CSS if/else？
在日常开发中，我们经常需要根据不同条件切换样式，比如响应式布局、特性检测、主题切换等。传统 CSS 的做法通常是这样：

@media (orientation: landscape) {
  .card { flex-direction: row; }
}
@media (orientation: portrait) {
  .card { flex-direction: column; }
}

这种大量的媒体查询分散在不同地方，维护起来比较麻烦，很多时候逻辑和样式分离， 阅读和修改也不直观。

什么是 if()？
基本语法
CSS if() 函数的运作方式是使用一系列条件-值对，其结构如下所示：

property: if(
  condition-1: value-1;
  condition-2: value-2;
  /* ... */
  else: value-n
);

1.每个条件后面跟一个冒号和对应的样式值
2.else 是可选的，表示默认值
支持三种条件
media()：媒体查询（如屏幕尺寸、方向等）
supports()：特性检测（浏览器是否支持某个 CSS 功能）
style()：样式值判断（通常配合 CSS 变量，用于状态切换）
举个例子：

.selector{
  background: if(
      media(min-width: 600px): red;
      supports(display: grid): blue;
      else: green
    );
}

.浏览器会先判断 media(min-width: 600px)，如果成立就用 red，后面条件不再判断。
.如果第一个不成立，再判断 supports(display: grid)，成立就用 blue。
.如果都不成立，才用 else 的 green。
也就是说，如果有多个条件同时成立，只有排在最前面的那个会生效。
上述代码会与以下媒体查询产生相同的结果：

/* 1. 先判断 min-width: 600px */
@media (min-width:600px) {
.selector {
    background: red;
  }
}

/* 2. 如果不满足 min-width: 600px，再判断是否支持 display: grid */
@medianot all and (min-width:600px) {
@supports (display: grid) {
    .selector {
      background: blue;
    }
  }
}
/* 3. 如果都不满足，使用默认值 */
@medianot all and (min-width:600px) {
@supportsnot (display: grid) {
    .selector {
      background: green;
    }
  }
}

使用场景
除了上面举例的内联媒体查询场景可以使用外，CSS 的 if() 函数还在内联兼容查询和基于状态样式设置场景中非常受用：
内联兼容查询
是否支持 :has() 选择器

.card {
  outline: if(
    supports(selector(:has(*))):
      2px dashed #4caf50;
    else:
      1px solid #ccc);
}

CSS 功能的不断增强，很多新特性（如 has()、subgrid 等）虽然强大，但并不是所有浏览器都已全面支持。这时候我们可以使用 if() 函数配合 supports()，按需提供降级样式，既兼容老浏览器，又能充分发挥新特性的能力。

基于状态样式设置

<div class="card" data-status="complete">
  ...
</div>
.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

常常需要根据元素的业务状态（如“待处理”“已完成”等）来动态调整样式。以前需要借助 JS 动态加 class，或者用多个 CSS 类去维护。现在，借助 if() 函数和 CSS 变量，我们可以只通过一个属性来控制全部状态样式 — 更优雅也更灵活。
兼容性
目前，if() 只在最新版的 Chrome 137+、Edge 137+ 支持，Safari、Firefox 等 还不行。

建议：
1.生产环境慎用，或加好降级方案
2.可以在实验性项目、内部工具中尝鲜体验