CSS变量在Android 4.4–6.0 WebView中完全不支持，因Chromium 30–44内核缺失解析逻辑，--x声明和var(--x)被静默丢弃；Android 7.0–9.0虽基本可用，但嵌套、calc()等场景仍易失效，须运行时检测加构建时降级双管齐下。
因为这些浏览器压根没实现 CSS Custom Properties 语法解析器，--x 声明和 var(--x) 都被静默跳过——不是“失效”，是根本没读。
Android 4.4–6.0 WebView 完全不支持 var()
这些版本基于 Chromium 30–44，内核里没有变量解析逻辑。遇到 :root { --color: red; } 或 color: var(--color);，整条声明直接丢弃，DevTools 里也看不到警告，样式回退到继承值或初始值（比如文字变黑、背景透明）。
-
@supports (--x: red)在 Android 6.0 前同样被忽略，连带里面定义的规则一并跳过 - 不能靠 UA 字符串判断系统版本——很多定制 ROM 的 WebView 内核和系统版本严重脱节
- 运行时检测更可靠：
document.documentElement.style.setProperty('--t', 'ok') !== undefined返回false就说明不可写 - 检测失败后，立刻给
<html>加no-cssvars类，切换降级样式
color: var(--c, #333) 在 IE/Android 4.4 里完全无效
IE11、Android 4.4 及更早版本连 var() 语法都不认识，整条声明静默丢弃。后备值必须无条件前置，且写在同一属性的不同声明中。
- 错误写法：
color: var(--text-color, #333);→ IE 和老安卓全丢弃，取继承色 - 正确写法：
color: #333; color: var(--text-color, #333);→ 老系统用第一行，新系统覆盖第二行 - 复合属性如
background、border不能只写一个后备：老浏览器会丢弃整条声明，导致背景透明、边框消失 - 安全做法：拆成单值属性，例如
background-color: #fff; background-color: var(--bg, #fff);
PostCSS postcss-custom-properties 为什么没生效？
它只做静态替换，能力边界非常明确。构建后还有 var(-- 残留，说明至少触发了以下某条限制：
立即学习“前端免费学习笔记（深入）”；
- 变量定义跨文件：插件只处理同一 CSS 文件内的
:root或显式作用域定义 - 值含
calc()或嵌套var(--a)：插件无法求值，直接跳过 - 变量由 JS 动态注入：
document.documentElement.style.setProperty('--c', 'red')，插件完全看不见 - 插件顺序错误：如果在
autoprefixer之后运行，带前缀的规则可能已变形，匹配失败 - 局部作用域变量（如
.card { --pad: 1rem; }）会被处理，但不会“传播”到父选择器，别指望它能覆盖全局 fallback
@media (min-width: var(--bp)) 静默失效
这是规范硬性限制：媒体查询匹配发生在样式计算之前，而 var() 求值依赖层叠与作用域，两者不在同一阶段。浏览器看到就判定非法，整条规则丢弃，控制台零提示。
- 正确做法是在每个
@media块内显式重设:root变量：@media (max-width: 768px) { :root { --gap: 8px; } } - JS 修改
--bp后，媒体查询不会重新匹配——它只响应视口变化（如resize），不响应变量变更 - 媒体查询中重定义变量，必须作用于同一选择器层级；
.card里的var(--text-color)不会读:root新值，除非你也在@media中对.card重设 - 所有变量堆在
:root容易引发意外覆盖，组件级变量建议加命名空间，如--card-text-color
最常被忽略的是：真机调试不能依赖 Chrome 模拟，也不能只信 @supports 检测。Android 6.0 以下、iOS 12 以下、Safari 14 及更早，var() 就是语法黑洞——得靠运行时检测 + 构建时降级双管齐下，缺一不可。
