CSS变量在IE11及更早版本中完全不被识别，var(--x)整条声明会被静默丢弃；后备值var(--x,#fff)无效，因IE连var()语法都不认识；正确做法是前置静态值、后置var()覆盖，并用@supports(color:var(--_))检测支持性。
直接说结论：CSS变量在IE11及更早版本中完全不被识别，var(--x)整条声明会被浏览器静默丢弃，不是降级，是失效。靠var(--x, #fff)的后备值救不了IE——它连var()函数语法都不认识，根本不会去解析括号里的内容。
为什么 var(--x, #fff) 在 IE 里不生效
这是最常踩的坑：误以为后备值能兜底所有旧浏览器。
-
var(--x, #fff)的后备机制只在支持 CSS 变量语法的浏览器中起作用（Chrome 49+、Firefox 31+、Safari 9.1+） - IE11 遇到
color: var(--x, #fff)，直接判定整条声明无效，跳过执行，最终取继承值或属性初始值（比如color变成黑色） - 后备值不能是另一个
var()，也不能是initial或unset——这些在 IE 里同样无效，且语义混乱
正确做法是：把静态值写在 var() 前面，让 IE 优先读取它：
button {
background: #007bff; /* IE 和所有浏览器都认 */
background: var(--primary, #007bff); /* 支持变量的浏览器覆盖上一行 */
}
注意顺序不可颠倒。浏览器按声明顺序应用，后声明的会覆盖前声明的（同优先级下）。
@supports (color: var(--x)) 是唯一可靠检测方式
不能用 @supports (--x: red) —— 这个语法不合法，所有浏览器都会忽略。
- 必须检测「使用行为」，而不是「定义行为」：
@supports (color: var(--_))（变量名可以任意，甚至不存在） -
@supports在 IE 中本身就不支持，所以它只能用于现代浏览器的增强逻辑，不能单独作为降级依据 - 典型组合写法：
.card {
background: #f8f9fa; /* 兜底：所有浏览器 */
}
@supports (background: var(--bg)) {
.card {
background: var(--bg, #f8f9fa); /* 现代浏览器才启用变量 */
}
}
这样既避免了 IE 解析失败，又让新浏览器获得动态能力。
PostCSS 插件降级只对静态变量有效
postcss-custom-properties 是构建时替换方案，但它有硬性限制：
- 只处理同一文件内、
:root或明确作用域中已定义的静态值，例如：--color: #ff6b6b; - 遇到以下情况会跳过，留下未替换的
var()：- 变量定义在 JS 中（
document.documentElement.style.setProperty('--color', 'red')） - 变量值含
calc()、其他变量、函数（如--size: calc(var(--base) * 1.2)） - 变量定义在
@media内部，或跨 CSS 文件引用
- 变量定义在 JS 中（
- 配置必须设
preserve: false，否则生成两份样式（一份带var()，一份带 fallback），白占体积
验证是否生效？构建后打开输出 CSS，搜索 var(-- —— 如果还有残留，说明变量定义不符合插件要求。
JS 动态改变量时，IE 必须绕开 setProperty
在 IE11 中调用 element.style.setProperty('--color', 'red') 会抛 InvalidCharacterError，因为引擎根本不允许以 -- 开头的属性名。
- 不要用
CSS.supports('color', 'var(--x)')判断——IE 里这个 API 存在但永远返回false，不可靠 - 更稳妥的运行时检测是：
const supportsCssVars = window.CSS && CSS.supports && CSS.supports('color', 'var(--fake)');
if (!supportsCssVars) {
document.documentElement.classList.add('no-cssvars');
}
然后在 CSS 中写：
.button { background: var(--primary); }
.no-cssvars .button { background: #007bff; }
这个类名方案兼容性最好，连 IE9 都能跑，且不影响构建流程。
真正容易被忽略的是：**变量作用域和继承链断裂问题**。给 body 设了 --primary，但中间某个组件加了 all: unset 或重写了 --primary，下游就收不到。调试时别只看 DevTools 的 Computed 面板，要顺着元素层级往上查 Styles 里是否真有该变量声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
