旧版浏览器如IE11和Android 4.4–6.0完全不解析CSS自定义属性，--x声明和var(--x)被静默丢弃，后备值无效，@supports检测不可靠，需fallback前置+运行时检测与构建降级双管齐下。
因为旧版浏览器压根没实现 CSS Custom Properties 语法解析器，--x 声明和 var(--x) 都被静默丢弃——不是“降级失败”，是根本没读。
IE11 和 Android 4.4–6.0 完全不识别 var() 语法
遇到 color: var(--primary) 或 --bg: #fff，IE11 和 Android 4.4–6.0 的 WebView 直接跳过整条声明，不报错、不警告、DevTools 里也看不到。最终样式取属性初始值（比如 color 变成黑色，background 变成透明）。
-
var(--x, #fff)后备值无效：IE 连var()函数都不认识，括号内容根本不解析 - 变量定义在局部选择器（如
.theme-dark { --c: red; }）时，IE 不会跨作用域查找，var(--c)依然失效 -
@supports (--x: red)在 Android 6.0 前完全不识别，整个@supports块被忽略
@supports (color: var(--x)) 不是万能检测开关
这个写法本身合法，但只在支持变量的浏览器中生效；IE11 和老安卓 WebView 既不支持 var()，也不支持 @supports 规则，所以它起不到“隔离逻辑”的作用。
- 错误用法：
@supports (--x: red) { ... }—— 语法非法，所有浏览器都忽略 - 正确用法：fallback 必须无条件前置，
@supports仅作增强层，例如：button { background: #007bff; }@supports (background: var(--bg)) { button { background: var(--bg); } } - 别指望
CSS.supports('--x')：JS API 在 IE11 和 Android 6.0 前抛TypeError
PostCSS 降级和 css-vars-ponyfill 都有硬限制
构建时替换和运行时补丁都不是“开了就灵”，配置或时机错一点，就等于没加。
立即学习“前端免费学习笔记（深入）”；
-
postcss-custom-properties只处理同一文件内、:root中定义的静态值；JS 动态设置的document.documentElement.style.setProperty('--c', 'red')它看不见 -
css-vars-ponyfill默认只扫描:root和:host下的变量，局部定义的--c被跳过 - 脚本放在
<head>里同步执行？CSS 文件还没加载完，它扫不到<link>里的var() - 没设
watch: true？后续 JS 修改变量，页面样式不会更新
calc() + var() 在 IE11 中是双重失效
哪怕 css-vars-ponyfill 成功替换了 var(--gap)，IE11 的 calc() 解析器仍会因空格或单位混合（如 calc(100% - 16px)）直接丢弃整条声明。
- 稳妥做法：纯数值变量（如
--gap: 12px）直接写成width: calc(100% - 12px) - 若
--gap需动态，只能 JS 注入内联样式，或放弃 IE11 支持 - 避免
rgba(var(--r), var(--g), var(--b))这类嵌套，在 Android 7.0–9.0 上也可能静默失败
真正落地的兼容方案必须运行时检测 + 构建时降级双管齐下，且 fallback 必须无条件前置——任何依赖“后备值”或“检测后启用”的设计，在 IE11 和老安卓上都会白屏或样式塌陷。
