如何解决旧版Edge中CSS自定义属性的解析错误？

旧版Edge（12–18）完全不解析var(--x)，整条CSS声明被静默丢弃；必须用postcss-custom-properties构建时静态替换，显式配置preserve: true并确保变量定义在:root且为静态常量，calc()内嵌var()等动态场景无法降级。

旧版Edge（12–18）根本不会解析 var(--x)，不是“兼容性差”，是整条声明被静默丢弃

Edge 12–18 使用 EdgeHTML 内核，对 var() 语法零支持。遇到 color: var(--primary); 这样的声明，浏览器直接跳过整行，不报错、不 fallback、不继承——最终颜色取属性初始值（比如 color 变成黑色）。你在开发者工具里看到该样式被划掉、computed 值为空，基本就是这个原因。

别指望 var(--primary, #007bff) 能兜底：IE 和旧 Edge 连 var() 函数名都不认识，括号里的内容根本不会被解析。

• 必须前置静态值，后置 var() 覆盖：color: #007bff; color: var(--primary, #007bff);
• 顺序不能颠倒，否则旧浏览器一行都用不上
• 复合属性（background、border、font）必须拆成单值声明，否则整条被丢弃

postcss-custom-properties 配置不对，降级就完全失效

插件默认不启用，也不自动识别变量定义。只装了 postcss-preset-env 但没显式开 custom-properties，构建后 CSS 里照样满屏 var()，旧浏览器照崩。

• 正确写法（单独使用插件）：postcss-custom-properties({ preserve: true }) —— preserve: true 输出两行，新旧浏览器各取所需
• 用 postcss-preset-env 时，必须写：{ features: { 'custom-properties': true } }，stage: 3 不会自动包含它
• 变量必须定义在 :root 或当前文件内明确作用域中；跨文件 @import 未声明，插件就看不见
• 构建后务必打开产出 CSS，全局搜索 var(-- —— 还有残留，说明变量值含 calc()、嵌套 var(--base)，或 JS 动态注入，插件无法处理

calc(var(--x)) 在旧版 Edge 里不是降级，是整个表达式被 parser 忽略

width: calc(100% - var(--gap)); 这种写法，在旧 Edge 中不是 var(--gap) 失效，而是整个 calc() 被当成无效值丢弃，结果 width 取初始值 auto，布局直接塌陷。

立即学习“前端免费学习笔记（深入）”；

• PostCSS 插件默认不处理 calc() 内的 var()，因为无法安全求值
• 纯数值变量（如 --gap: 12px）可手动改写为 width: calc(100% - 12px);
• 若 --gap 需动态变化，旧浏览器只能放弃该逻辑，或改用 JS 注入内联样式
• 伪元素中用 content: var(--label) 同样危险：Edge 75–78 存在竞态，::before 可能读不到值，建议提升到 :root 或改用 JS 插入文本节点

运行时检测别用 @supports (--x: red) 或 CSS.supports('--x')

@supports (--x: red) 是非法语法，所有浏览器都会忽略；@supports (color: var(--_)) 在 IE11 和旧 Edge 中直接报 TypeError，根本没法执行。

• 真正可用的是 JS 检测：if (window.CSS && CSS.supports('color', 'var(--_)')) { document.documentElement.classList.remove('no-cssvars'); }
• 配合 class 降级最稳妥：.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; }
• @supports 只能在现代浏览器中做增强，不能单独作为降级依据
• 媒体查询中定义的变量（如 @media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被 PostCSS 回溯解析，建议避免

最关键的其实是变量值本身：只要含 calc()、嵌套 var()、JS 动态设置，PostCSS 就无能为力。降级能覆盖的，仅限 :root 下定义的静态常量。其他情况，要么重构逻辑，要么明确放弃旧浏览器支持。