ie11及更早版本不解析var(--x)，整条css声明被静默丢弃；必须通过postcss-custom-properties设preserve: false彻底移除var()，且变量需定义在:root、为纯常量、无calc()或嵌套引用。
IE11 及更早版本根本不会解析 var(--x)，整条 CSS 声明被静默丢弃——不是颜色没变，而是样式直接消失。必须让最终产出的 CSS 文件里彻底没有 var() 函数调用，否则任何 fallback 写法都无效。
postcss-custom-properties 的 preserve: false 必须显式设置
默认配置下插件只追加降级值，比如把 color: var(--primary); 编译成：
color: #007bff; color: var(--primary);
IE 看到第二行就跳过，最终取继承色或 initial（background 变透明，color 常为黑色）。只有设 preserve: false 才会删掉含 var() 的行，只留静态值。
-
preserve: true或不写该选项 → 构建后仍有var(--x)，IE 依旧失效 - Webpack/Vite 中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前，否则可能被覆盖 - 若同时用
css-vars-ponyfill，它依赖原始var()存在；此时必须配preserve: true，但 IE 下会双失效——PostCSS 没删掉var()，ponyfill 又因变量未定义而跳过
:root 定义 + 静态常量值是唯一安全组合
PostCSS 插件是编译期工具，无法读取 JS 动态设置、跨文件定义、或运行时计算的值。能被降级的变量必须满足：
- 声明位置：必须在
:root（最稳妥），或通过@import明确引入的同一文件内；.card { --pad: 1rem; }这类局部定义默认不处理 - 值类型：只能是纯常量 ——
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，建议提至顶层
fallback 写法必须前置静态值，且不能用于复合属性
很多人误以为 color: var(--text, #333); 能兜底 IE，其实 IE 连 var() 语法都不认识，整条声明被跳过，结果仍是继承值。
- 正确写法：
color: #333; color: var(--text-color, #333);—— IE 用第一行，现代浏览器覆盖第二行 - 复合属性如
background、border含var()时，IE 会丢弃整条声明（背景变 transparent，边框消失） - 安全做法：拆成原子属性，例如
background-color: #fff; background-color: var(--bg, #fff);+background-image: url(...);
no-cssvars 类比 @supports 更可靠
@supports (background: var(--x)) 在 IE11 中本身不被识别，整条规则被忽略，起不到降级作用。它只能用于现代浏览器增强逻辑。
- JS 检测必须用
CSS.supports('color', 'var(--_)')（传完整声明），不能用CSS.supports('--_')（IE 报TypeError） - 检测后给
加no-cssvars类：<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script> - 再写
.no-cssvars .btn { background: #007bff; }—— 这才是真实兜底，顺序和 class 名都不能错
最容易被忽略的是构建后验证：打开产出的 CSS 文件，全局搜索 var(--，只要还有残留，说明变量定义跨文件、值含 calc()、或插件根本没生效。动态设置的变量（如 document.documentElement.style.setProperty('--c', 'red')）完全绕过 PostCSS，必须靠 JS 分支单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
