CSS - if statements - AsakawaReikiri

406 words

2 minutes

CSS - if statements

2025-06-25

Uncategorized

CSS

if() 函数允许根据不同属性检查结果赋予不同的值，这些条件包括 style query、media query 以及 feature query 等

Intro#

if() 是 2025 年引入的 CSS 新特性（Chrome 137 及以上版本支持），允许开发者在纯 CSS 中实现条件逻辑，而无需依赖 JavaScript、预处理器（如：Sass）或多个类名

在此之前，CSS 的条件主要通过 @media、@container、@supports 等规则实现

Example#

Basics#

1
.box {
2
  width: 300px;
3
  height: 300px;
4
  background-color: red;
5
}
6

7
@media (width <= 1000px) {
8
  .box {
9
    background-color: blue;
10
  }
11
}
12

13
@media (width <= 600px) {
14
  .box {
15
    background-color: green;
16
  }
17
}

1
.box {
2
  width: 300px;
3
  height: 300px;
4
  background-color: if(
5
    media(width <= 600px): green;
6
    media(width <= 1000px): blue;
7
    else: red;
8
  );
9
}

if() 局限在于无法复用属性逻辑

例如：对于同样的 color 属性需要根据不同的媒体查询赋值，在每一个选择器中重复定义条件

1
.box {
2
  color: if(
3
    media(width <= 600px): red;
4
    media(width <= 1000px): blue;
5
    else: white;
6
  );
7
}
8

9
a {
10
  color: if(
11
    media(width <= 600px): red;
12
    media(width <= 1000px): blue;
13
    else: white;
14
  );
15
}

if style checks#

1
.box {
2
  --test: "hi";
3

4
  width: 300px;
5
  height: 300px;
6
  background-color: if(
7
    style(--test: "hi"): green;
8
    else: red;
9
  );
10
}

这种 style() 检查也可以通过更早的 @container 实现

1
:root {
2
  --test: "hi";
3
}
4

5
.box {
6
  width: 300px;
7
  height: 300px;
8
  background-color: red;
9
}
10

11
@container style(--test: "hi") {
12
  .box {
13
    background-color: green;
14
  }
15
}

Example use case for if function#

使用 if() 函数将媒体查询的结果抽象为断点变量

1
:root {
2
  --bp: if(
3
    media(width <= 600px): "sm";
4
    media(width <= 1000px): "md";
5
    else: "lg";
6
  );
7
}
8

9
.box {
10
  width: 300px;
11
  height: 300px;
12
  background-color: if(
13
    style(--bp: "sm"): green;
14
    style(--bp: "md"): blue;
15
    style(--bp: "lg"): red;
16
    else: black;
17
  );
18
}

if attr checks#

attr() 函数允许在 CSS 中访问元素的属性值，例如：data-* 或其他标准属性

1
.box {
2
  --status: attr(data-status);
3

4
  width: 300px;
5
  height: 300px;
6
  background-color: if(
7
    style(--status: "loading"): green;
8
    style(--status: "loaded"): blue;
9
    style(--status: "error"): red;
10
    else: black;
11
  );
12
}