旧版浏览器（IE11等）完全不识别var()语法，整条CSS声明被静默丢弃；var(--c, #333)无效，因IE不解析函数；正确写法是前置静态值、后置var()，如color: #333; color: var(--c, #333)；复合属性须拆分为单值声明，PostCSS需preserve:false且变量定义在:root为静态常量。
旧版浏览器（IE11、iOS 12 以下、Android 4.4 WebView）根本不会识别 var(--color)，整条声明被静默丢弃——不是颜色没变，是样式直接失效。靠 var(--color, #fff) 的逗号后备毫无作用，因为 IE 连 var() 语法都不认识。
为什么 var(--c, #333) 在 IE 里完全无效
这是最常翻车的操作点：误以为括号里的后备值能兜底。实际上，IE11 遇到 color: var(--c, #333)，会把整条声明当非法语句跳过，最终取继承色（常为黑色）或属性初始值（如 background 变成 transparent）。它不解析函数，不读参数，不执行 fallback。
-
color: #333; color: var(--c, #333);✅ 正确：IE 忽略第二行，用第一行；现代浏览器覆盖第一行 -
color: var(--c, #333);❌ 失效：IE 整行跳过，无 fallback -
color: #333; color: var(--c);❌ 危险：IE 忽略第二行，但若第一行没写，仍回退到继承值
复合属性（background、border）必须拆成原子声明
含 var() 的复合属性在旧浏览器中整条声明被丢弃，不是局部降级。比如 background: #fff url(img.png) no-repeat; background: var(--bg, #fff) url(img.png) no-repeat;，IE 会丢掉第二行，背景变成 transparent。
- 必须拆解：
background-color: #fff; background-color: var(--bg, #fff);+background-image: url(img.png); -
border: 1px solid #ccc; border: 1px solid var(--border-color, #ccc);同样危险——IE 丢弃整条border声明，边框消失 - 安全做法：只对单值属性用
var()，或拆成border-color、border-width单独声明
PostCSS 替换后仍要人工检查输出是否干净
postcss-custom-properties 插件只能静态替换同一文件内、:root 中定义的纯常量值。构建后必须打开产出 CSS 文件，全局搜索 var(-- —— 如果还有残留，说明：
- 变量定义跨文件，或通过 JS 动态注入（如
document.documentElement.style.setProperty('--c', 'red')），插件完全看不见 - 值含
calc()或嵌套var(--base)，无法静态求值，插件原样保留 - 媒体查询中定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析
运行时检测必须用 CSS.supports('color', 'var(--_)')
@supports (--x: red) 和 CSS.supports('--x') 在 IE11 中均报 TypeError，不可用。唯一可靠方式是 JS 检测后加类：
if (!CSS.supports('color', 'var(--_)')) {
document.documentElement.classList.add('no-cssvars');
}
再写 .no-cssvars .btn { background: #007bff; }。注意：这个类必须前置加载，不能等 DOMContentLoaded 才执行，否则闪屏。
真正麻烦的不是怎么写 fallback，而是哪些地方根本没法 fallback——比如 width: calc(100% - var(--gap))，IE 连 calc() 都不进，整条规则失效，只能提前算死值或放弃支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
