ie11和旧版edge（12–18）完全不解析var(--x)，整条css声明被静默丢弃；@supports无法兜底，必须外层写降级样式，且postcss需设preserve: false或配合静态常量变量。
IE11 和旧版 Edge（12–18）根本不会解析 var(--x)，整条 CSS 声明被静默丢弃——不是“ fallback 没生效”，而是浏览器压根不读那行。靠 @supports (color: var(--x)) 或 var(--x, #fff) 单独兜底，完全无效。
为什么 @supports 不能单独做降级依据
@supports 在 IE 中被整个忽略，连规则体都不会执行；Safari 9–10.1 虽支持 var()，但遇到 var(--x, #000) 这类 fallback 语法会直接跳过整块。更关键的是：@supports (--color: red) 是非法写法，浏览器静默丢弃，必须写成 @supports (color: var(--x)) 才合法。
降级样式必须写在 @supports 外层，否则旧浏览器根本看不到：
.btn { background-color: #007bff; }
@supports (color: var(--x)) {
.btn { background-color: var(--primary-color, #007bff); }
}
- IE 和旧 Edge 只执行第一行，
@supports块被跳过 - 现代浏览器覆盖为第二行，且 fallback 保证变量未定义时也不崩
- 千万别把降级样式塞进
@supports内部——那等于只给新浏览器看
postcss-custom-properties 的 preserve: false 是硬性要求
默认配置下插件只追加声明，生成类似 background: #007bff; background: var(--primary);，而 IE 遇到第二行就跳过，最终取 background: initial（即透明），导致大面积样式丢失。
必须显式设 preserve: false，才能真正删掉含 var() 的行，只保留静态值：
plugins: {
'postcss-custom-properties': { preserve: false }
}
-
preserve: true→ 旧浏览器仍失效（var()还在） - 不写该选项 → 等同于
true，照样崩 - 若同时用
css-vars-ponyfill，它依赖原始var()存在，此时必须配preserve: true，但 IE 下会双失效：PostCSS 没删、ponyfill 又没跑成
哪些变量能被 PostCSS 安全降级
PostCSS 是编译期工具，只能处理构建时静态可求值的变量。以下情况它完全无感，会原样输出 var(--x)，导致 IE 崩溃：
- 变量通过 JS 动态注入：
document.documentElement.style.setProperty('--color', 'red') - 变量定义在另一个未被
@import显式引入的 CSS 文件中 - 值含
calc()：--gap: calc(1rem + 2px) - 嵌套引用：
--c: var(--base) - 媒体查询内定义：
@media (min-width: 768px) { :root { --gap: 16px; } }（插件通常无法回溯）
唯一稳妥路径是：:root 下定义纯常量，例如：
:root {
--primary-color: #007bff;
--spacing-xs: 4px;
--border-radius: 4px;
}
calc() 里嵌套 var() 必须手动拆解
width: calc(100% - var(--gap)) 在 IE 中不是 “var() 不生效”，而是整个 calc() 表达式被 parser 直接跳过，width 取初始值 auto，布局塌陷。
PostCSS 插件默认不处理 calc() 内的 var()，因为它无法安全求值。应对方式只有两种：
- 如果
--gap是纯数值（如--gap: 12px），手动改写为width: calc(100% - 12px) - 如果
--gap需运行时动态变化，旧浏览器只能放弃该逻辑，或改用 JS 注入内联样式 - 别指望
postcss-calc链式处理——它对未替换的var()无能为力
最容易被忽略的一点：即使 @supports 返回 true，也不代表变量已注入或可读——JS 主题脚本没执行完、CSS 加载顺序错乱、或变量在 :root 外定义，都会让 var(--x) 在运行时返回空值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
