全新 CSS if 函数将彻底改变样式写法

前言

CSS 的新 if() 函数将彻底改变前端开发者的样式设置方式，它允许在 CSS 中直接进行条件判断，减少了对 JavaScript 的依赖，并为样式设计带来了更多的灵活性和动态性。

译文从这开始～～

全新的 CSS if() 函数已在 Chrome 137 中上线。

想象一下：每一次更新都在让 CSS 更加强大，逐渐模糊它与编程语言之间的界限 —— 有些以前必须用 JavaScript 完成的事情，现在 CSS 也能搞定了。

以前，如果我们想根据某些条件（比如元素的颜色或 class）来决定样式，就必须借助 JavaScript 来判断，然后再操作。

对于那些还在坚持 “CSS 不是编程语言” 的人，我想说：看看这个新功能，你也许该重新思考这个观点了。

if() 函数能带来什么？

首先说明：这是一个原生 CSS 函数，不需要 JavaScript！

顾名思义，它可以根据条件为元素应用不同的样式，就像 JavaScript 中的 if-else 逻辑一样。

为了更好地理解，我们先来看一下它的语法。

property:if(
    style(<condition>): <value>;
    style(<another condition>): <another value>;
    else: <fallback>
);

• property 是你要改变的 CSS 属性，比如 background-color、width 或 color。

• if() 开始条件判断逻辑，意思是：让 CSS 去检查这些条件并根据它们来应用样式。

• style 表示当条件成立时要使用的值，可以是任意合法的 CSS 值。

• condition 是判断条件，可以是 CSS 变量（自定义属性）或属性（比如 data-status）。

• else 是备用方案 —— 如果没有条件满足，就使用这里的默认值。

听起来可能有些抽象，下面我们用几个例子来看看这个新函数的实际用途。

示例 1：配合 CSS 变量实现条件样式

我们用纯 CSS 来实现一个简单的亮 / 暗主题切换。

HTML：

<div class="dark">Dark Mode</div>
<div class="light">Light Mode</div>

CSS：

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

.dark{
    --color: black;
}
.light{
    --color: white;
}

这里的逻辑是：

• 判断 --color 是否是 white。
• 如果是，就应用黑色背景。
• 如果不是，就默认用粉色背景。

示例 2：根据 HTML 属性（如 data-status）设置样式

HTML：

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

CSS：

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

解释一下：

• --status 利用 attr() 从 data-status 中提取值。

• 每个 if() 判断当前状态，并根据不同值应用相应的样式。

这样就能根据元素状态动态设置样式，不再需要额外的 class 或 JavaScript。

注意事项与限制

虽然这个功能很酷，但在使用时也要注意一些限制，否则 “自由” 的 CSS 可能会反过来制造混乱。

• 🔴 目前仅在 Chrome 137+ 中支持（实验性功能）
• 🔴 不支持数值比较（比如 >、<）
• 🔴 只能比较明确的值，不能用计算结果来判断
• 🔴 滥用会让 CSS 难以维护
• 🔴 不能完全取代 JavaScript，只是减少部分使用场景

最后总结

我会立刻用这个功能吗？可能不会。

毕竟它还很新，而且目前只在 Chrome 上能用。但它的潜力已经很明显了。

if() 函数为 CSS 引入了真正的 “逻辑”，以往这类功能只能通过 JavaScript 或 SASS 实现。

这确实是一个进步。原生 CSS 正变得更聪明，越来越接近预处理器多年来所提供的功能。

虽然现在还不能说它可以完全替代其他工具，但这无疑是迈出了重要的一步。

祝大家写 CSS 愉快！

关于本文
译者：@飘飘
作者：@Arnold Gunter
原文：https://medium.com/@arnoldgunter/the-new-css-if-function-will-change-your-way-of-styling-forever-a90e251ad3a1

S36沙龙会科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

S36沙龙会科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。S36沙龙会科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。