IE11对var(--x)是直接忽略整条CSS声明，而非兼容性差；必须设postcss-custom-properties的preserve:false静态替换，变量须定义在:root且为静态常量，兜底用no-cssvars类而非@supports。
IE11 对 var(--x) 的处理不是“不兼容”，而是直接忽略整条 CSS 声明——.btn { color: var(--primary); } 在 IE11 里等同于 .btn { }，样式彻底丢失。没有 fallback，没有报错，只有静默失效。
IE11 为什么连 var(--x, #fff) 都不认
这不是后备值写得不够好，是语法层被拒：IE11 根本不认识 var() 这个函数，括号内无论写什么（包括逗号和默认值），整条声明都会被 parser 跳过。它不会尝试解析、也不会降级到第二个参数。
-
color: #333; color: var(--text, #333);✅ —— IE 用第一行，现代浏览器覆盖第二行 -
color: var(--text, #333);❌ —— IE 当成空声明，取继承色（常为黑色） -
background: #fff url(img.png); background: var(--bg, #fff) url(img.png);❌ —— 复合属性含var()，IE 整条丢弃，背景变transparent
postcss-custom-properties 必须设 preserve: false
默认配置下插件只做“追加”，比如把 color: var(--c) 编译成 color: #007bff; color: var(--c);。IE 看到第二行就跳过，结果还是回退到初始值。
- 必须显式设
preserve: false，插件才会删掉var()，只留color: #007bff; - 漏配或写成
preserve: true，构建后 CSS 里仍有var(--x)，IE 依旧白屏 - Webpack/Vite 中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前
哪些变量能被 PostCSS 安全降级
插件只处理构建时静态可求值的定义，动态、跨文件、嵌套表达式一律跳过。
立即学习“前端免费学习笔记（深入）”；
- ✅ 定义必须在
:root（最稳妥），或通过@import明确引入的同一文件内 - ✅ 值只能是纯常量：
--color: red;、--gap: 12px; - ❌
--size: calc(1rem + 2px);、--c: var(--base);、--bg: linear-gradient(...);全部无法替换 - ❌
width: calc(100% - var(--gap));—— IE 直接跳过整个calc()，PostCSS 默认也不处理这种嵌套
运行时兜底必须用 no-cssvars 类，别信 @supports
@supports (background: var(--x)) 在 IE11 里本身不被识别，会直接忽略整条规则，起不到任何降级作用。
- JS 检测必须用
CSS.supports('color', 'var(--t)')（传完整声明），不能只传'--t'（IE 报TypeError） - 检测后给
<html>加no-cssvars类，再写.no-cssvars .btn { background: #007bff; } - 如果用了
css-vars-ponyfill，它必须等document.styleSheets加载完成后再调用，否则扫不到 CSS 中的var()
真正容易被忽略的是：构建后必须打开产出的 .css 文件，全局搜索 var(-- —— 只要还有残留，说明变量定义位置不对、值含动态内容，或插件根本没生效。这不是“差不多能用”，而是“要么全有，要么全无”。
