css变量在android 4.4–6.0 webview中完全失效，因chromium 30–44内核缺失css custom properties解析器，--x声明和var(--x)被静默丢弃；7.0–9.0虽基本支持但嵌套、混用易出错，需运行时检测+构建时降级双管齐下。
CSS 变量在某些移动端 WebView 中渲染异常，根本原因不是“写错了”，而是对应内核压根没实现 --x 解析逻辑——它不报错，也不警告，直接跳过整条声明。
Android 4.4–6.0 的 WebView 完全不支持 var()
这些版本基于 Chromium 30–44，内核里没有 CSS Custom Properties 的语法解析器。遇到 --primary: #007bff 或 color: var(--primary)，整条规则被静默丢弃。DevTools 里看不到警告，样式回退到继承值或初始值（比如文字变黑、背景透明）。
-
@supports (--x: red)在 Android 6.0 前同样被忽略，连带里面定义的变量规则一并跳过 - 本地 Chrome 调试正常，但真机白屏，大概率是 CSS 文件路径没转成
file:///android_asset/css/vars.css，导致 404，变量文件根本没加载 - 变量若定义在 JS 动态注入（如
document.documentElement.style.setProperty('--c', 'red')），PostCSS 插件看不见，构建后仍是var(--c)，老 WebView 直接跳过
color: var(--c, #333) 在老安卓上完全无效
后备值写法 color: var(--c, #333) 在 IE11 和 Android 4.4 里不会降级，而是整条声明失效。必须写成两行：
color: #333; color: var(--c, #333);
- 第一行是 fallback，第二行才是变量；老内核不认识
var()，就用第一行 -
@supports (color: var(--x))不可靠：它本身在 Android 6.0 前就不被识别，无法触发降级逻辑 - 真正能落地的方案是运行时检测 + 构建时降级双管齐下
PostCSS postcss-custom-properties 在安卓构建中常失效
插件没起作用，往往不是配置问题，而是它“看不见”变量定义：
- 变量必须是静态可求值的：不能含
calc()，不能引用另一个未展开的变量（如--c: var(--a)），不能是 JS 动态注入的值 - 作用域必须显式覆盖：如果变量定义在
.theme-dark { --bg: #111; }里，而你在.btn里直接写background: var(--bg)，插件不会跨选择器推导 - 插件顺序错误：如果
postcss-custom-properties在autoprefixer之后运行，某些带前缀的规则可能已变形，导致变量匹配失败 - 验证方式：构建后打开输出 CSS，搜索
var(--—— 如果还有残留，说明上述某条被触发了
Android 7.0–9.0 上嵌套和混用场景易出 bug
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)，运行时无法跨作用域查到
最麻烦的点在于：异常不报错、不警告、不提示，只悄悄回退——你得主动检测、主动降级、主动验证输出，靠肉眼观察或本地调试根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
