首页 > 文章 > 前端

CSS if() 条件函数怎么减少主题分支：自定义属性、回退与浏览器支持检查

来源：17golang原创

时间：2026-08-24 21:57:34 216浏览收藏

主题按钮、间距和打印样式经常各写一套分支，CSS 文件很快就会被重复选择器撑大。CSS if() 可以把“某个条件成立时，这个属性取什么值”收进同一条声明里，但它不是 JavaScript 的替代品：当前仍属于实验性能力，不能跳过浏览器支持检查。

要点速览

if() 适合在单个属性值中按条件选值，多个属性或整组规则仍应使用 @media、@supports 或 @container。
条件从左到右判断，首个成立的分支生效；没有命中时用 else 或普通声明兜底。
主题分支优先依赖注册在祖先上的 CSS 自定义属性，别把普通属性误写成 style query。
上线前必须验证不支持 if() 的浏览器仍能看到可用的普通声明和可读对比度。

先把 CSS if() 放进一个可回退的属性

先从颜色这种单属性场景开始。假设主题容器通过 --scheme 传递状态，按钮只根据这个状态改变背景色：

.theme-panel {
  --scheme: light;
}

.theme-panel .action {
  background: #2457d6;
  background: if(
    style(--scheme: dark): #8db5ff;
    style(--scheme: high-contrast): #000000;
    else: #2457d6;
  );
  color: #ffffff;
}

这里保留了第一条普通 background。老浏览器读不懂后面的函数时，会忽略那条声明，按钮仍然有蓝色背景。支持该能力的浏览器则按分支顺序选择颜色。

style()、media() 和 supports() 分别解决什么问题

三个条件测试看起来很像，实际作用范围完全不一样。如果直接混着写，最常遇到的问题就是代码逻辑看着没问题，实际渲染结果不符合预期。

条件	适合判断	示例
`style()`	祖先传下来的自定义属性状态	`style(--scheme: dark)`
`media()`	视口、打印、方向等媒体条件	`media(width`
`supports()`	浏览器是否理解某个声明	`supports(display: grid)`

if() 只能给当前属性返回一个值。比如移动端需要同时改变网格列数、间距和字号，继续堆三个 if() 会让维护成本上升，此时普通的 @media 更清楚；如果要对一组规则做能力分层，则使用 @supports。

用 media() 收拢单个间距值

.toolbar {
  gap: if(
    media(width

这段写法只改变 gap。如果移动端还要改变布局方向，直接写一段媒体查询通常更容易测试，也更容易给不支持 if() 的浏览器留下完整回退。

条件顺序和 else 是最容易漏掉的验收点

CSS if() 不会把所有符合条件的结果叠加起来，而是从左到右拿第一个成立的分支。下面的写法中，深色主题即使同时满足某个更宽泛的条件，也会优先得到第一条结果。

.card {
  border-color: #cbd5e1;
  border-color: if(
    style(--scheme: high-contrast): #000000;
    style(--scheme: dark): #8db5ff;
    else: #cbd5e1;
  );
}

不要把 else 当成装饰。没有命中条件时，函数可能返回无效值，当前属性就没有可用结果；对于主题组件，明确的末尾回退比依赖浏览器解析细节更稳。

什么时候应该退回 @media 或 @supports

可以用三个问题快速判断场景是否适配：

是不是只需要改变一个属性的值？如果不是，优先考虑条件规则。
条件是否来自组件祖先的自定义属性？如果不是，别强行套 style()。
不支持 if() 时是否仍然有合理结果？没有就先补普通声明或规则级回退。

特别要注意，@supports 检查的是浏览器能否识别某个声明，而不是替你把多个主题规则重新组织好。可以把它作为增强层：

.notice {
  padding: 12px;
  background: #f2f4f7;
}

@supports (background: if(media(print): white; else: black)) {
  .notice {
    background: if(media(print): #ffffff; else: #f2f4f7);
  }
}

生产代码里建议按照目标浏览器兼容矩阵做实测，不要只看构建工具是否接受相关语法。实验性特性就算在本机浏览器运行正常，嵌入式WebView、旧版企业浏览器或者自动化截图环境也有可能直接跳过增强声明部分。

上线前的浏览器支持与可访问性检查

可以把下面这组检查加入组件验收流程，不用等到线上收到主题相关反馈再临时补适配：

关闭实验性能力或者使用不支持该特性的浏览器，确认普通声明仍然可以正常显示背景、边框和文字内容。
分别测试默认主题、深色主题、高对比主题和打印预览场景，确认每个分支都能输出预期结果。
用键盘操作聚焦按钮，检查焦点环在浅色和深色背景下都清晰可见。
打开开发者工具查看最终计算值，确认命中的确实是预期分支，而不是整条声明直接失效。
把 else 分支写成设计系统的默认值，避免组件脱离主题容器后出现透明背景。

总结

CSS if() 的价值在于减少“一个属性、三套主题分支”的重复代码，而不是把 CSS 变成脚本。把主题状态放到自定义属性，按首个命中规则组织分支，始终写清 else 和普通声明回退；一旦需求扩大到整组规则，就回到 @media、@supports 或 @container。这样即使实验性语法在某个环境中没有生效，组件也不会失去基本可用性。