by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11788
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、CSS真逻辑函数

CSS之前也支持类逻辑函数，例如数学函数中的min()、max()，本质上也是有逻辑的，例如：max(300px, 100vw)，表示:

• 如果100vw的计算宽度大于300px，则最终尺寸300px
• 否则是100vw的宽度。

现在，CSS支持 if() 函数了，这个是真正意义上的逻辑函数了。

目前，if() 支持三种不同类型的查询：

• style()：样式查询
• media()：媒体查询
• supports()：支持查询

其中，media()和supports()查询平时我们使用的机会不多，原因很简单，因为有兼容性更好的传统实现方法。例如，下面的CSS代码片段作用是一样的：

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

但是后者的兼容性更好，可读性也更好，在目前这个阶段，肯定是优先使用后面的方法。

supports()查询也是类似的：

select {
  opacity: if (
    supports(appearance: base-select): 1; else: 0;
  );
}

等同于：

@supports not (appearance: base-select) {
  select {
    opacity: 0;
  }
}

注意，关键字 else 是在 if() 函数里面的。

style() 样式查询也有对应的查询，不过这个查询是也是新特性。例如：

canvas {
  background-image: if(
    style(--scheme: ice): linear-gradient(aliceblue, white, skyblue);
    style(--scheme: fire): linear-gradient(lightyellow, white, yellow);
    else: none;
  );
}

类似于：

@container style(--scheme: ice) {
  canvas {
    linear-gradient(skyblue, white, #caf0f8);
  }
}
@container style(--scheme: fire) {
  canvas {
    linear-gradient(lightyellow, white, yellow);
  }
}

注意，上面的措辞是“类似于”，并未完全相等，如果--scheme: ice是写在<canvas>元素上，两者并不相同，需要在容器元素上。

假设有HTML如下：

<canvas style="--scheme: ice"></canvas>
<canvas style="--scheme: fire"></canvas>

则实时渲染效果如下：

由于if()函数中的style()查询更加具有不可替代性，因此，这个函数接下来我会重点讲述。

二、style()与CSS变量匹配

style() 样式查询只能查询CSS变量，普通CSS属性是不支持的。

我们来看一个案例，了解下是如何使用的，想了下，昨天用到的一个CSS Sprites定位非常使用此效果。

下图所示的就是素材：

在过去，我们可能需要对4个元素使用不同的选择器进行处理，现在，可以一把hold住了。

相关代码如下所示：

<label class="label" style="--type: 1">阅篇专家</label>
<label class="label" style="--type: 2">万字周报大师</label>
<label class="label" style="--type: 3">互动急先锋</label>
<label class="label" style="--type: 4">佳作分享达人</label>

此时，只需要一段CSS规则就可以实现所有图标的样式效果了：

.label {
  display: inline-block;
  font-size: 0;
  width: if(
    style(--type: 1): 80px;
    style(--type: 3): 96px;
    else: 112px;
  );
  height: 26px;
  background: url(sprite.png) no-repeat 0 0 / 116px auto;
  background-position-y: if(
    style(--type: 2): -34px;
    style(--type: 3): -68px;
    style(--type: 4): -102px;
    else: 0px;
  );
}

渲染效果如下图所示：

是不是比过去的代码更加简约了。

三、最大的阻碍兼容性

if()函数虽然很屌很帅气，但是兼容性还不行，目前仅Chrome 137+浏览器支持。

另外，if()函数式支持嵌套的：

color: if(
  style(--scheme: ice):
    if(
      media(prefers-color-scheme: dark): #caf0f8;
      else: #03045e;
    );
  style(--scheme: fire):
    if(
      media(prefers-color-scheme: dark): #ffc971;
      else: #621708;
    );
  else: black
);

其他就没什么了，静待浏览器全面支持吧。

感谢阅读，宋玉长老希望你转发这篇文章！

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11788

（本篇完）