旧版Edge（12–18）和IE完全不解析var(--x)，整条声明被静默丢弃，必须用postcss-custom-properties构建时静态替换；需显式启用customProperties: true，preserve: true保留动态能力，calc()内嵌var()等场景无法降级。
旧版 Edge（12–18）和 IE 完全不解析 var(--x)，不是“兼容性差”，而是整条 CSS 声明被静默丢弃——连 fallback 都不走。必须用 postcss-custom-properties 在构建时静态替换，且配置稍有偏差就会失效。
为什么 postcss-custom-properties 默认不工作
插件不会自动启用，必须显式声明。常见错误是只配了 postcss-preset-env 却漏掉 customProperties: true：
-
postcss-preset-env({ stage: 3 })不会启用 CSS 变量降级，因为自定义属性属于 stage 2 - 正确写法是：
postcss-preset-env({ features: { 'custom-properties': true } }) - 若单独使用插件，必须写全：
postcss-custom-properties({ preserve: true })，否则新浏览器无法动态更新变量
preserve: true 和 preserve: false 怎么选
这个选项决定输出是否保留原始 var() 声明，直接影响新旧浏览器行为：
-
preserve: true→ 输出两行：color: #007bff; color: var(--primary);，新浏览器用后者，旧浏览器用前者 -
preserve: false→ 只输出color: #007bff;，旧浏览器能用，但新浏览器彻底失去变量能力（JS 无法修改、主题切换失效） - 绝大多数项目应选
preserve: true；只有纯静态站点、且明确放弃动态能力时才用false
哪些 var() 根本没法降级
PostCSS 是编译期文本替换工具，它看不到运行时逻辑。以下情况插件直接跳过，var() 会原样留在 CSS 里，旧浏览器照样失效：
Myosin Hivemind Knowledge Retrieval
下载
搜索 Hivemind 精选的 Web3 营销知识库（RAG），获取从业者洞察、框架、实操指南和案例研究。当：(1) an... 时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 变量值含
calc()：如--gap: calc(1rem + 2px);→ 插件无法求值，保留原样 - 嵌套变量：
--color: var(--brand);→ 插件默认不递归解析 - JS 动态设置：
document.documentElement.style.setProperty('--color', 'red');→ 构建时根本不存在，插件无从捕获 - 定义与使用跨文件：变量在
vars.css，但没通过@import或importFrom显式引入 → 插件只看当前文件
旧版 Edge 中 calc(var()) 组合会彻底崩溃
width: calc(100% - var(--gap)) 在旧版 Edge 里不是“var() 失效”，而是整个 calc() 表达式被解析器直接忽略——样式丢失，且无任何报错或 fallback。
这不是插件没配好，是浏览器 parser 的硬限制。可行解法只有两个：
- 把变量值提前算死：
--gap: 12px;→ 手动写成width: calc(100% - 12px); - 改用内联样式或 CSS-in-JS 注入，绕过 CSS 文件解析阶段
- 别指望
postcss-calc和postcss-custom-properties链式配合能自动解决——顺序错、配置漏、或值不可静态推导，结果仍是空值
最易被忽略的点：变量必须定义在 :root 或显式作用域选择器内，且必须是纯常量；@supports (background: var(--x)) 在旧版 Edge 里本身就不被识别，运行时检测也别用 CSS.supports()，它会直接抛 TypeError。
