Chrome 引入了 CSS 的 If 函数，在 CSS 中原生支持条件样式

Chrome 137 引入了对新的CSS if函数的支持，首次在原生样式表中直接引入条件逻辑，减少了对预处理器或基于 JavaScript 回退的需求。这个特性允许开发人员直接在属性值中编写声明式条件样式。

if()函数是不断发展的 CSS 值和单位模块第 5 级规范的一部分，目前仅在 Chrome 137 及更高版本中独有。它支持使用三种内联条件类型进行条件-值评估：style()、media()和 supports()。它提供了一种灵活而强大的方式，根据自定义属性、媒体查询或特性支持动态应用样式。

熟悉Sass或PostCSS 的开发人员可能会发现这个函数特别有用，因为它将类似的逻辑带入了原生 CSS。一些开发人员认为这是消除对 Sass 等预处理器需求的关键一步。

这次发布中的一个主要功能是能够在不离开 CSS 文件的情况下使用 if()函数进行实时条件样式设置。语法允许开发人员传递一个条件，后跟一个值，以及可选的 else 子句。

通过将自定义属性与 HTML 元素上的 data-status 属性配对，以下示例展示了 if()如何根据属性的值为面板分配不同的背景颜色：

.panel {  --status: attr(data-status type(<custom-ident>));  background-color: if(    style(--status: proposed): blue;    style(--status: assigned): pink;    style(--status: progress): orange;    style(--status: complete): green;    else: gray  );}

这个版本在开发者社区引起了不同的反应。一些评论者批评了这种语法，称其十分混乱。一位开发人员将其比作三目运算符：

我真的不喜欢它的语法。它基本上就是一个三目运算符，只是 if()内部的所有内容都放在了 if()里面，而不是通常的 if (condition)。

与任何 CSS 新功能一样，if()函数也有其局限性。在撰写本文时，if()函数仅在 Chrome 137+中支持，与 Firefox 或 Safari 的对齐有限。因此，建议开发人员谨慎使用，并提供回退以确保兼容性。社区对兼容性和缺乏统一标准感到担忧，将 Chrome采取的方法比作微软的旧策略“拥抱、扩展和消灭”，即对于 Internet Explorer，他们会制定自己的标准。

其他人对这一变化持更积极的态度。在最近的一段视频中，Theo Browne 探索了这个新特性，并强调了它在大规模样式系统的优势，在使用传统方法时，一个位置错误或顺序错误的伪类可能会破坏 UI。有了 if()，这种风险降低了，因为条件逻辑包含在样式声明内部，一旦满足条件，浏览器就会应用匹配的值并忽略其余部分。Theo 总结说，他不仅对这个特性感到兴奋，而且感到“CSS 的未来从未如此光明”。

Chrome 137自 2025 年 5 月已起进入稳定版本状态。开发人员现在可以在支持的环境中开始使用 if()，并可以通过 W3C 的CSS值和单位模块第5级跟踪规范的进展。

原文链接：

https://www.infoq.com/news/2025/08/chrome-css-if-function/