如果 CSS 能像 JavaScript 一样进行条件判断会怎样？

你可能会想，只是个条件判断，能有什么用？

那你就太小瞧这个功能了！不过，这篇文章带你展示它的强大。

PS这方面，目前 CSS if 函数已在 Chrome 中发布。

. 基本用法

property: if;

函数会按顺序检查条件并应用第一个匹配的值。如果没有条件匹配，则使用 else 值。

. 大使用场景

. 深色模式

以前实现深色模式。要么用 JavaScript 切换 class，要么写两套样式。这样做的痛点这方面，

• 需要额外的脚本。增加 bundle 大小；
• 主题切换时容易出现闪烁；
• 维护两套 CSS，易出错。

现在你可以直接这样写：

body {
说到--me，"dark";/* 通过 JavaScript 或使用者偏好切换 */
background: if: #1a1a1a;else:white)，color: if: #e4e4e4;else:#000)，}

. 响应式布局

传统响应式写法繁琐又难维护：

.container { width:%;}
@media { .container{width:540px;} }
@media { .container{width:720px;老实说，} }
@media { .container{width:960px;} }
/* ...更多断点... */

现在可以简化为一行：

.container{
width这方面，if:1320px;media:1140px;不过，media:960px;media:720px，其实，media:540px;else:%)，padding-inline:
再看if，2rem;else:1rem)，}

. 优雅降级

想用最新颜色函数 lch，但旧浏览器不支持怎么办？ 以前要写兜底方案，代码堆积且不易维护：

.element{
border-color:rgb;说起来，/* 后备 */
border-color:lch;/* 新浏览器覆盖 */
}

现在可以用 supports 明确检测，保持代码整洁：

.element{
border-color:
if) : lch;supports) : lab;else:rbg)，}

. 浏览器支持度 & 回退策略

• ✅ Chrome/Edge：从版本 XX 开始支持
• ✅ Chrome Android：从版本 XX 开始支持
• ❌ Firefox：开发中。不建议生产环境使用
• ❌ Safari：在路线图上，但尚未发布
• ❌ Opera：尚未支持

如果你现在就想试，用下面这种方式保证回退：

.button{
/* 所有浏览器的基础样式 */
padding:1rem 2rem;background:#007bff;/* Modern browsers override */
padding:
从if来看，.5rem .5rem;style: .5rem .8rem;else :1rem );background:
if的观点是，#007bff;style:#28a745;style:#dc3545;else:#6c757d);}

. 技术进步与心态调整

我记得刚学前端时每次看到新技术都会担心自己落后。后来发现技术不是制造焦虑，而是解决实际问题。

• 开发者痛点之一： 多版本维护成本高；
• 兼容性挑战： 老旧浏览器导致业务受限；
• 可读性差导致错误频发；

CSS if 函数确实很酷。它能让这些痛点得到缓解，但并非必须立即上手。把它当作工具箱里的新工具，等到项目需要时再使用即可。

新技术的意义不是“必须马上学”，而是“原来还有更优雅的做法”。如果现在项目里没必要，就先收藏起来等浏览器支持或遇到对应场景再启用。

前端学习是一场马拉松，而非短跑。慢慢来不必急于求成，

I am 冴羽，一名专注前端领域的工程师。我的博客更新了多个系列原创技术文章，并翻译过 Svelte、Solid.js、TypeScript 文档。著有《Next.js 开发教程》《Svelte 开发教程》《Astro 实战教程》三本小册子。

欢迎关注我的“网页版朋友圈”，订阅公众号冴羽