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

旧版Edge（12–18）对`var(--x)`这个语法，完全“不识别”，并非兼容性差，而是整条声明被静默丢弃。当你写入`color: var(--primary);`，它直接跳过该行，不报错、不降级、不继承——最终颜色取属性的初始值，例如`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`下定义的静态常量。其他情况，要么重构逻辑，要么明确放弃旧浏览器支持。