完整解决CSS变量var在IE浏览器的兼容降级处理方案

IE11 及更早版本的浏览器，完全不支持 var(--x) 这种 CSS 变量语法。一旦遇到此类写法，整条 CSS 声明就会被默默丢弃——不仅仅是“颜色未生效”，而是整个样式链路直接中断。要实现有效的降级兼容，最终构建输出的 CSS 文件中必须完全消除 var() 函数调用，否则所有降级措施都毫无意义。

### 为何 color: #007bff; color: var(--primary); 在 IE 中无法生效 你可能认为，既然代码中写了两个 color 属性，IE 至少会选用其中一个。但实际上，IE 解析到第二行 color: var(--primary); 时，会直接将其视为无效声明并跳过，最终采用继承值或 initial 默认值（例如 background: initial 表现为 transparent）。IE 既不执行 fallback 回退逻辑，也不识别 CSS 变量覆盖机制。

• ✅ 正确做法：color: var(--text-color, #333); —— 后备值与 var() 必须位于同一行、同一条声明内
• ❌ 错误做法：先写 color: #333; 换行再写 color: var(--text-color); 无法被 IE 识别
• ⚠️ 注意：var(--x, var(--y, #000)) 在 IE 中仅识别最外层 #000，但嵌套本身并无实际意义，因为 IE 根本不解析任何 var() 表达式

### postcss-custom-properties 务必设置 preserve: false 在默认配置下，该插件仅会追加降级值：color: #007bff; color: var(--primary);，IE 依然无法正常解析。唯有启用 preserve: false，才能真正移除包含 var() 的那一行声明，仅保留静态后备值。很多开发者在此处踩坑，误以为默认配置即可满足兼容需求。

• 在 Webpack/Vite 构建流程中，需确保该插件在 autoprefixer 之前执行，避免被后续处理环节干扰
• 若同时使用了 css-vars-ponyfill，则不能设置 preserve: false——否则 ponyfill 将无法找到原始的 var() 声明，运行时替换会失效
• CSS 变量必须定义在 :root 中，且值必须为静态常量：--color: red; ✅，--size: calc(1rem + 2px); ❌，--c: var(--base); ❌

### calc() 内部不能嵌套 var()，PostCSS 也无法解决 width: calc(100% - var(--gap)); 在 IE11 中并非仅仅是“var() 未生效”，而是整个 calc() 计算表达式被解析器直接跳过。PostCSS 插件默认不处理此类嵌套场景，因其无法安全地进行求值运算。这是前端兼容性中常见的认知盲区。

• 稳妥方案：将 --gap: 12px 这类纯数值变量，直接书写为 width: calc(100% - 12px); 静态值
• 若 --gap 需要动态变化，则需通过 JavaScript 注入内联样式，或直接放弃对 IE11 的兼容支持
• 不要依赖 postcss-calc 与 postcss-custom-properties 链式协作——执行顺序错误或配置遗漏，结果仍为空值

### 使用 no-cssvars 类做降级兜底比 @supports 更可靠 @supports (background: var(--x)) 在 IE11 中完全不被识别，整条规则会被忽略，因此不能单独依赖它作为降级判断依据。

• JavaScript 检测需传入完整声明字符串：CSS.supports('color', 'var(--t)') ✅，CSS.supports('--t') ❌（IE 会抛出 TypeError）
• 推荐实现方式：
• CSS 中准备两套样式：.btn { background: var(--primary); } 和 .no-cssvars .btn { background: #007bff; }

构建完成后务必打开产出的 CSS 文件，全局搜索 var(-- —— 只要存在残留，就说明变量定义位置有误、值包含动态表达式，或者插件根本没有生效。这是兼容性保障的最后一道防线，切不可省略。