ie11及更早版本完全不解析var()语法，整条css声明被静默丢弃；正确降级需前置静态值（如background: #007bff; background: var(--primary);），配合@supports(color: var(--_))检测并用no-cssvars类兜底，postcss仅处理同文件内:root静态变量。
IE11及更早版本根本不会解析var()语法
这不是“不支持变量值”，而是整条声明被静默丢弃。比如color: var(--text, #333)在IE里等价于这行代码不存在——浏览器直接跳过，最终取继承值或初始值（color变成黑色）。很多人误以为后备值能兜底，其实var(--x, #fff)的逗号语法本身就不被IE识别，连括号里的内容都不会进入解析流程。
所以别在IE环境里幻想var()有任何行为，它和写color: nonsense(--x)效果一样：无效、无声、无日志。
正确降级必须靠声明顺序+@supports双保险
静态值必须写在var()前面，且用相同属性名覆盖：
-
background: #007bff;→ 所有浏览器都执行 -
background: var(--primary, #007bff);→ 仅现代浏览器执行，覆盖上一行
@supports检测必须作用于「使用」而非「定义」：
- ✅ 正确：
@supports (color: var(--_))（检测var()能否在声明中使用） - ❌ 错误：
@supports (--x: red)（语法非法，所有浏览器忽略）
注意：@supports自身在IE中不支持，所以它只能包裹增强逻辑，不能替代静态兜底。
PostCSS插件只处理静态定义，JS动态设值完全失效
postcss-custom-properties这类构建时替换工具，只扫描同一文件内、:root或明确作用域中已写出的静态赋值，例如：
:root {
--color: #ff6b6b;
}
以下情况它完全无感，会原样输出var(--color)，导致IE崩溃：
- 变量通过
document.documentElement.style.setProperty('--color', 'red')在运行时注入 - 变量定义在另一个未被PostCSS处理的CSS文件中
- 变量名拼写错误或引用了未定义的
--missing
这意味着：组件库若依赖运行时主题切换，就不能指望PostCSS自动降级。
复杂组件库建议分层处理CSS变量
把变量拆成三类，分别应对不同场景：
-
基础色值（如
--primary,--text）→ 用静态值前置 +@supports包裹，确保IE可用 -
布局变量（如
--gap,--radius）→ 若组件本身已用flex/grid等IE不兼容特性，变量降级意义不大，可直接放弃IE支持 -
JS驱动变量（如暗黑模式开关
--is-dark）→ 改用data-theme="dark"class控制，避免依赖var()条件渲染
最易被忽略的是：组件库文档里写的「支持IE11」，往往只测试了静态主题，没覆盖JS动态换肤路径——上线后一开主题切换就白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
