使用新的 if() 函数的 CSS 条件语句

Una Kravets

发布时间：2025 年 7 月 1 日

从 Chrome 137 开始，您可以使用 if() 函数试用 CSS 内嵌条件。if() 可为样式查询和媒体查询等动态样式提供更简洁的开发者界面，但存在一些关键差异，您可以在本文中了解相关信息。

CSS if() 函数使用一系列条件-值对，结构如下：

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

您可以提供 else 语句，如果其他条件均不满足，则使用该语句：

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

目前，if() 可处理以下三种不同类型的查询：

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

下面我们通过一些示例来了解一下具体情况：

演示：内嵌媒体查询

使用 if() 是一种在样式中添加内嵌媒体查询的好方法。例如，您可以检查用户的主题偏好设置（浅色或深色），或者针对视口宽度执行内嵌媒体查询。以下示例展示了针对指控设备的媒体查询。在具有精细指针（例如鼠标）的设备上，按钮的默认大小为 30 像素；但在具有粗略指针的触摸屏设备上，按钮的大小将为建议的最小尺寸 44 像素，以便提供适当的触控间距，方便用户操作。

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;
  }
}

使用 if() 格式可让您将逻辑内嵌，而无需在两个不同的位置设置样式逻辑。

演示：使用 if() 会增加粗略指针设备的按钮字体大小。

演示：内嵌支持查询

使用 if() 的另一种方式是创建内嵌支持查询。例如，如需检查是否支持 OKLCH 等宽色域色彩，您可以使用：

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

借助此代码，如果浏览器支持 oklch 色彩空间，用户将看到更鲜艳的色彩，并且还会通过 ::after 伪内容收到消息：“您的浏览器支持 OKLCH”。

使用 if() 函数的支持查询。

如需详细了解 RGB 与更高级的色彩空间之间的区别，请访问 oklch.com，查看颜色选择器和相关资源。

演示：直观呈现界面状态

您还可以使用 if() 进行基于状态的样式设置。例如，根据进度卡的界面状态（待处理或已完成）设置其样式。将状态直接存储在数据属性或自定义属性中，然后使用 if() 将样式内嵌应用于该属性。

<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);
}
使用 if() 函数以内嵌方式为属性设置有状态标签的样式。

通过在 if() 函数中使用 style()，您可以直接设置目标元素的样式，而无需像 CSS 样式查询那样使用父元素。

此演示展示了一个基本示例，说明如何使用 if() 来支持新的 CSS 架构方法。与类相比，使用 CSS 自定义属性的一大优势在于，可以在 CSS 中轻松更新它们。例如，可以使用媒体查询或伪状态（如 :hover）来更新它们。

后续步骤

添加 if() 为 CSS 开发者带来了新的架构机会。随着样式查询等技术的发展，未来可能可以在 if() 函数中使用范围查询，并且在与即将推出的自定义函数提案 (CSS @function) 结合使用时，它们也会非常有用。

如需详细了解这些功能，请参阅：