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(-- —— 只要有残留，说明变量定义位置不对、值含动态表达式，或者插件根本没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
