css变量在android 4.4–6.0 webview中完全失效，因chromium 30–44内核缺失解析器，--x声明和var(--x)被静默丢弃；7.0–9.0虽基本支持但嵌套、混用易出错，需运行时检测+构建时降级双管齐下。
老旧 Android WebView（4.4–6.0）根本不解析 --x 和 var(--x)，不是“不兼容”，是压根没这句语法——整条声明被静默丢弃，连 DevTools 都不报错。
Android 4.4–6.0 的 WebView 完全不支持 CSS 变量
这些版本基于 Chromium 30–44，内核里没有 CSS Custom Properties 解析器。遇到 --primary: #007bff 或 color: var(--primary)，浏览器直接跳过整行，样式退回到继承值或初始值（比如文字变黑、背景透明）。@supports (--x: red) 同样被忽略，连带里面定义的规则一并失效。
Android 7.0–9.0 上 var() 基本可用但有隐藏陷阱
Chromium 51+ 开始支持，但组合使用极易出错：
-
rgba(var(--r), var(--g), var(--b))这类嵌套用法可能被当作无效值，最终取默认rgba(0,0,0,0) - 和
filter: drop-shadow()混用时，老 WebKit 渲染管线会 bug：阴影偏移、截断甚至消失 - 变量若定义在局部选择器里（如
.theme-dark { --bg: #111; }），而你在.btn里写background: var(--bg)，运行时无法跨作用域查到
构建时降级 + 运行时检测必须双管齐下
光靠 PostCSS 插件（如 postcss-custom-properties）不够，尤其当变量来自 JS 或含 calc() 时；光靠 @supports 也不行，它在 Android 6.0 前根本不识别。真正能落地的方案是：
- 运行时检测：
document.documentElement.style.setProperty('--t', 'ok') !== undefined，返回false就说明不可写，立刻加载降级样式表或加no-cssvars类 - 构建时降级：确保
postcss-custom-properties在autoprefixer之前运行；变量必须静态可求值（不能含calc()、不能引用未展开变量、不能是 JS 动态注入）；作用域必须显式覆盖（比如把变量提到:root） - 后备写法必须两行：
color: #333;放前面，color: var(--c, #333);放后面——老内核不认识var()，就用第一行
真机白屏常因路径或加载链断裂
本地 Chrome 调试正常，但低端安卓机上全白，大概率不是代码问题：
- CSS 文件路径没转成
file:///android_asset/css/vars.css，导致 404，变量文件根本没加载 - 变量定义在 JS 动态注入（如
document.documentElement.style.setProperty('--c', 'red')），PostCSS 插件看不见，构建后仍是var(--c)，老 WebView 直接跳过 - 用了
@supports (color: var(--x))但没前置 fallback，IE11 或 Android 4.4 里第二行整个声明失效，第一行又没写，结果属性取unset
最容易被忽略的是：变量名若含单位（如 --gap: 12px），fallback 值必须带相同单位，不能只写 12；还有，@supports 在 Android 4.4 WebView 里等于没写——它既不支持 display: grid，也不支持 @supports 规则本身，整块都会被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
