IE11及Edge 12–18不解析var()，整条CSS声明被静默丢弃；@supports和fallback均无效；PostCSS需显式设preserve: false，否则IE跳过导致样式丢失。
IE11 和旧版 Edge（12–18）根本不会解析 var(--x)，整条 CSS 声明被静默丢弃——不是 fallback 没生效，而是浏览器压根不读那行。想靠 @supports (color: var(--x)) 或 var(--x, #fff) 单独兜底，完全无效。
IE/Edge 12–18 下 CSS 变量失效的底层原因
这些浏览器遇到含 var() 的声明时，直接跳过整条规则，连属性名都不识别。这意味着：
-
background-color: #007bff; background-color: var(--primary);→ 第二行被忽略，但第一行仍生效（前提是它没被覆盖） -
@supports (color: var(--x)) { ... }→ 整个@supports块被忽略，内部样式永不执行 -
var(--x, #fff)在 Safari 9–10.1 中也会导致整块规则被跳过，不是只 fallback 失效
PostCSS + postcss-custom-properties 的 preserve: false 必须显式开启
默认配置下，插件只追加静态值，生成类似 color: #333; color: var(--text-color); 的代码。IE 看到第二行就跳过，最终取 color: initial（即透明或继承值），大面积样式丢失。
- 必须在 PostCSS 配置中写死
preserve: false，否则等于没配 - 不写该选项 → 等同于
true，照样崩 - 若同时引入
css-vars-ponyfill，它依赖原始var()存在，此时反而要设preserve: true；但 IE 下会双失效：PostCSS 没删、ponyfill 又没跑成
降级样式必须写在 @supports 外层，且顺序不能错
把 fallback 样式塞进 @supports 内部，等于只给新浏览器看，旧浏览器完全看不到。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
.btn { background-color: #007bff; } @supports (color: var(--x)) { .btn { background-color: var(--primary-color, #007bff); } } - IE 只执行第一行；现代浏览器覆盖为第二行，且
var(--primary-color, #007bff)保证变量未定义时也不崩 -
@supports (--color: red)是非法写法，浏览器静默丢弃，必须写成@supports (color: var(--x))
哪些变量 PostCSS 根本处理不了？
PostCSS 是编译期工具，只能处理构建时静态可求值的变量。以下情况它完全无感，会原样输出 var(--x)，导致 IE 崩溃：
- 变量通过 JS 动态注入：
document.documentElement.style.setProperty('--color', 'red') - 变量定义在另一个未被
@import显式引入的 CSS 文件中 - 变量值含运行时计算（如
calc(var(--gap) * 2)中的--gap来自 JS 注入）
这些场景必须搭配 css-vars-ponyfill 运行时处理，但要注意它仅支持 IE9+，且需确保原始 var() 保留在 CSS 中（即 preserve: true）。
