最新版 Chorme 开始支持 CSS 新增的 if() 函数

CSS 越来越像真正的编程语言了。随着诸如 CSS 变量、calc()函数、伪类的 :has() 和 :is() 以及不断变化的 @media 查询等的引入，CSS 编写复杂的样式布局变得更为容易。

最近 CSS 又添加了一个新的 if() 函数。不过，目前，只有 Chrome 137 以上版本支持该函数。

CSS 中的 if() 函数

if() 函数允许你根据给定的条件应用样式，从而更容易编写响应式和自适应的设计。

其语法如下：

div {
    color: if(
                style(<some-condition>): <some-value>;
                style(<some-other-condition>): <some-other-value>;
                else: <default-value>;
            );
}

如上所示，在 if() 函数中，你可以指定多个条件及其相应的样式。如果所有条件都不匹配，则应用 else 值。

style() 函数定义了条件和条件为真时要应用的值。

用例

以下是 CSS 中使用 if() 函数的简单用例。

<div class="dark">dark</div>
<div class="light">light</div>

我们可以使用 if() 函数来基于元素的类条件性地使用背景色。如下：

div {
  color: var(--color);
  background-color: if(
                        style(--color: white): black;
                        else: pink
                    );
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

上例中，if() 函数检测 --color 变量是否设置为 white。如果是，其北京市将设置为 black，否则将默认为 pink。

更高级的示例

if() 函数在需要基于 HTML 属性应用不同样式的场景中表现出色。

例如，下例中，我们可以利用 data-status 属性动态更改元素的边框颜色、背景颜色，甚至网格列。

<div class="container">
  <div class="card" data-status="pending">
  </div>

  <div class="card" data-status="complete">
  </div>

  <div class="card" data-status="pending">
  </div>

  <div class="card" data-status="inactive">
  </div>
</div>

以下是如何使用动态样式。

.card {
  --status: attr(data-status type(<custom-ident>));
  border: 1px solid;
  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
                    );

  grid-column: if(
                    style(--status: pending): 1;
                    style(--status: complete): 2;
                    else: 3
                );
}

浏览器支持

if() 函数在最新版本的 Chorme(v137 以上)开始获得支持。其他浏览器也在考虑在将来的版本中添加支持。请谨慎使用。