IE11及更早版本完全不支持CSS自定义属性，必须通过PostCSS静态替换并彻底移除var()函数，配合no-cssvars类手动降级，且需验证构建输出无残留。
IE根本不认识var()，不是兼容性差而是直接报无效值
IE11及更早版本对CSS Custom Properties完全无解析能力。写color: var(--text-color);在IE里等价于color: ;——空声明，浏览器会回退到继承值或初始值（比如color: initial是黑色，但background初始值是transparent）。这不是“颜色没变”，而是样式链断裂，可能引发布局塌陷、按钮不可见、主题色全丢。
关键判断：不能指望IE“部分支持”或“降级渲染”，必须让最终生成的CSS里**彻底没有var()函数调用**。
用postcss-custom-properties做静态替换的前提条件
这个插件不是魔法，它只在构建时做文本替换，依赖变量定义可静态求值：
- 变量必须在同一个CSS文件中、且在使用前声明（
:root { --color: #007bff; }最稳妥） - 变量值不能含
calc()、其他var()、函数（如linear-gradient()）或JS注入内容 - 局部作用域变量（如
.card { --pad: 1rem; }）会被处理，但不会跨选择器传播；插件不分析DOM结构 - 配置里必须设
preserve: false，否则会保留原始var()行，体积变大且IE仍失效 - Webpack中若用CSS Modules，类名哈希会导致
:root外的变量无法被插件捕获——建议全局变量统一收口到:root
@supports和no-cssvars class双保险才真可靠
@supports (color: var(--x))在IE11里不执行（IE11不支持@supports），所以不能单独依赖它做降级。真正有效的兜底是手动加class：
立即学习“前端免费学习笔记（深入）”；
- 页面加载时用JS检测：
if (!CSS.supports('color', 'var(--t)')) document.documentElement.classList.add('no-cssvars'); - CSS里写两套：
.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; } - 不要用
background: #007bff; background: var(--primary);这种覆盖写法——IE会把第二行当无效值，然后回退到父级background，结果可能是transparent - Fallback值必须是合法CSS值，不能是另一个
var(--x)（IE连嵌套语法都不识别）
构建后必须人工验证CSS输出是否干净
跑完构建，打开产出的.css文件，全局搜索var(--：
- 如果还有残留，说明变量定义位置不对（比如用了
var(--c)但定义在另一个Sass文件里）、值含动态表达式、或PostCSS插件没生效（检查插件顺序：postcss-custom-properties必须在autoprefixer之前） - 特别注意媒体查询里的变量引用——PostCSS通常不回溯解析
@media块外定义的变量 - Vue/React项目里用JS动态设置
el.style.setProperty('--color', 'red')？这部分完全绕过PostCSS，必须用CSS.supports()分支处理，否则IE直接抛InvalidCharacterError
最易忽略的一点：CSS变量不能用于@media、@keyframes等语法层规则，哪怕PostCSS也无能为力——这类场景只能用预处理器变量或JS控制class切换。
