怎样解决CSS变量var()在IE浏览器中的降级处理方案？

IE11及更早版本完全不解析var(--x)，整条CSS声明被静默丢弃，必须通过postcss-custom-properties设preserve:false彻底移除var()并仅保留静态值，配合no-cssvars类兜底，且变量须定义在:root、值为静态常量，calc()内嵌var()不可降级。

IE11 及更早版本根本不会解析 var(--x)，整条 CSS 声明被静默丢弃——不是“颜色没变”，而是样式链断裂。必须让最终生成的 CSS 文件里彻底没有 var() 函数调用，否则降级就失败了。

为什么 color: #007bff; color: var(--primary); 在 IE 里不管用

IE 看到第二行 color: var(--primary); 就当无效声明跳过，结果取的是继承值或 initial（比如 background: initial 是 transparent）。它不走 fallback 逻辑，也不认“覆盖”概念。

• ✅ 正确写法：color: var(--text-color, #333); —— 后备值和 var() 必须在同一行、同一声明中
• ❌ 错误写法：color: #333; 换行再写 color: var(--text-color);
• ⚠️ 注意：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() 无法运行时替换
• 变量必须定义在 :root，且值为静态常量：--color: red; ✅，--size: calc(1rem + 2px); ❌，--c: var(--base); ❌

calc() 里不能套 var()，PostCSS 也救不了

width: calc(100% - var(--gap)); 在 IE11 中不是 “var() 不生效”，而是整个 calc() 表达式被 parser 直接跳过。PostCSS 插件默认不处理这种嵌套，因为它无法安全求值。

立即学习“前端免费学习笔记（深入）”；

• 稳妥做法：把 --gap: 12px 这种纯数值变量，直接写成 width: calc(100% - 12px);
• 如果 --gap 需动态变化，就得 JS 注入内联样式，或放弃 IE11 支持
• 别指望 postcss-calc 和 postcss-custom-properties 链式工作——顺序错或配置漏，结果还是空值

用 no-cssvars 类做兜底比 @supports 可靠

@supports (background: var(--x)) 在 IE11 里根本不识别，整条规则被忽略，不能单独作为降级依据。

• JS 检测要传完整声明字符串：CSS.supports('color', 'var(--t)') ✅，CSS.supports('--t') ❌（IE 报 TypeError）
• 推荐写法：<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script>
• CSS 里补两套：.btn { background: var(--primary); } 和 .no-cssvars .btn { background: #007bff; }

构建后务必打开产出的 CSS 文件，全局搜索 var(-- —— 只要有残留，说明变量定义位置不对、值含动态表达式，或者插件根本没生效。