CSS变量在IE11及更早版本中完全不被解析，var(--x)声明被静默丢弃；平滑兼容需构建时静态降级（postcss-custom-properties设preserve: false）与运行时no-cssvars class兜底双策略并行，缺一不可。
直接说结论：CSS变量在IE11及更早版本中根本不会被解析，var(--x)整条声明被静默丢弃，不是“颜色没变”，而是样式彻底消失。平滑兼容必须靠构建时静态降级 + 运行时 class 兜底双策略，缺一不可。
postcss-custom-properties 的 preserve 必须设为 false
默认配置下插件只追加降级值，比如把background: var(--primary);编译成：
background: #007bff; background: var(--primary);
IE看到第二行就跳过，最终取初始值（背景透明、文字黑色）。只有设preserve: false才会删掉含var()的行，只保留静态值。
-
preserve: true或不写该选项 → 构建后仍有var(--x)，IE依旧失效 - Webpack/Vite中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前 - 若同时用
css-vars-ponyfill，它依赖原始var()存在；此时必须配preserve: true，但IE下会双失效
变量定义必须满足三个硬约束
PostCSS插件是编译期工具，它看不到JS动态设置、跨文件定义、或运行时计算的值。能被降级的变量必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 声明位置：必须在
:root下（最稳妥），或通过@import明确引入的同一文件内；.card { --pad: 1rem; }这类局部定义默认不处理 - 值类型：只能是纯静态常量 ——
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，必须提至顶层
关键样式必须前置静态值 + no-cssvars class 双兜底
@supports (background: var(--x))在IE中本身不被识别，整条规则会被忽略，不能作为主降级依据。真正可靠的兜底方式是：
- JS检测写法：
CSS.supports('color', 'var(--_)')（别写CSS.supports('--x')，IE会报TypeError） - 脚本注入：
<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script> - 样式写法：
.btn { background: #007bff; } .no-cssvars .btn { background: #007bff; }——注意不是覆盖，是无条件 fallback + class 强制覆盖 - 复合属性如
background、border含var()时，IE会丢弃整条声明；必须拆成原子属性，例如background-color: #fff;+background-color: var(--bg, #fff);
动态变量场景必须绕开 CSS 变量路径
JS设置的变量（如主题切换、响应式尺寸）无法被PostCSS捕获，旧浏览器需完全另起一套逻辑：
- 改用
class切换控制样式：document.body.className = 'theme-dark';，再写.theme-dark .header { background: #333; } - 关键交互初始化时检测浏览器能力，对不支持变量的环境直接跳过CSS变量路径，走
class/fallback分支 -
calc(100% - var(--gap))这种写法在IE中整个表达式被parser跳过；要么手动拆解为calc(100% - 12px)，要么用JS注入内联样式：el.style.width = `calc(100% - ${gap}px)`
最容易被忽略的是构建后检查输出CSS：全局搜索var(--，只要还有残留，说明变量定义跨文件、值含calc()、或JS动态注入——这些PostCSS都看不见，必须人工干预。
