使用新的 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() 的另一种方法是创建内嵌支持查询。例如，如需检查是否支持 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”。

如需了解详情并了解 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() 函数内使用 style() 时，您可以直接为所定位的元素设置样式，而无需 CSS 样式查询所需的父元素。

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

后续步骤

添加 if() 为 CSS 开发者提供了新的架构机会。随着样式查询等技术的不断发展，我们有望在 if() 函数中实现范围查询，并且这些查询在与即将推出的自定义函数提案 (CSS @function) 结合使用时也非常有用。

如需详细了解这些功能，请参阅以下资源：

• 演示 3 的 3 分钟视频演示
• Lea Verou 撰写的文章