css支持if else

从 Chrome 137（2025年6月发布）开始，CSS 确实新增了 if() 条件函数，这是 CSS 条件逻辑的一次重大进步。

新增特性：if() 条件函数

1. 语法：

property: if(<condition>, <then>, <else>);

• <condition>：判断条件，可以是比较运算、逻辑运算。
• <then>：条件为 true 时的值。
• <else>：条件为 false 时的值。

2. 示例：

✔ 简单的值判断

width: if(100px > 50px, 200px, 300px);  /* 结果是 200px */

✔ 结合环境变量

/* 如果 prefers-color-scheme 是 dark，则背景为黑色，否则白色 */
background-color: if(env(prefers-color-scheme) = dark, black, white);

✔ 与 calc() / clamp() 搭配

font-size: if(100vw > 600px, 2rem, 1rem);

3. 支持的条件表达式：

• 数值比较：>, <, =, !=, >=, <=
• 布尔值：true, false
• 环境变量、CSS 变量
• 未来可能支持更复杂的嵌套、逻辑运算（&&、|| 等）

4. 适用范围：

目前支持属性值层级，不支持选择器级的判断。
常用于：

• 替代 @media 控制尺寸、颜色等；
• 替代 @supports 判断功能支持；
• 优化响应式设计。

5. 兼容性：

🔔 需要注意

• 这个特性目前 属于实验性功能，W3C 规范尚未正式定稿；
• 很多浏览器暂未跟进，生产环境使用需谨慎；
• 建议搭配 @supports 检测：

@supports (width: if(1 > 0, 100px, 200px)) {
  .box {
    width: if(1 > 0, 100px, 200px);
  }
}

之前类if else的模式

1. 媒体查询 (Media Queries)：实现类似 if 条件

/* 相当于 if (屏幕宽度 < 600px) */
@media (max-width: 600px) {
  .box {
    background-color: red;
  }
}
/* else 情况：大屏幕下 */
@media (min-width: 601px) {
  .box {
    background-color: blue;
  }
}

2. :has()、:not()、:is() 等伪类 —— 类似于“条件判断”

/* 类似 if (.parent 里有 .child) */
.parent:has(.child) {
  border: 1px solid red;
}

/* 类似 if (不是 .active) */
.button:not(.active) {
  opacity: 0.5;
}

⚠️ 其中 :has() 是 CSS4 特性，部分浏览器已支持（如 Chrome、Edge），但兼容性仍需注意。

3. CSS 变量 + var() + fallback 实现简单“条件切换”

/* 如果 --main-color 没有定义，使用 red */
color: var(--main-color, red);

4. 通过 JS / Vue / React / Angular 等框架绑定 class 或 style，动态控制 CSS 应用

<div :class="isDark ? 'dark' : 'light'"></div>

在这种场景下，“条件判断”是由 JS 实现的，CSS 只是负责描述样式。

5. 预处理器（Sass / Less）中支持 if / else

原生 CSS 没有 if/else，但 Sass、Less、Stylus 这些预处理器里是有的：

@if $theme == dark {
  body { background: black; }
} @else {
  body { background: white; }
}

但这是编译阶段的判断，浏览器最终看到的还是纯 CSS。