Android WebView内核版本过低导致CSS变量不支持：Android 4.3及更早版本完全忽略var()语法；4.4起支持但不稳定，需运行时检测并降级处理，避免与drop-shadow等特性混用，且link加载CSS须显式指定base URL。
安卓 WebView 内核版本太低，var() 直接被忽略
Android 4.4（KitKat）开始内置 Chromium 30 内核的 WebView，才初步支持 CSS 变量；但真正稳定可用要到 Android 5.0+（Chromium 39+）。低于这个版本的 WebView（比如 Android 4.3 及更早）压根不识别 --xxx 语法，遇到 var(--color) 就当无效声明跳过，样式回退为 unset 或继承值。
实操建议：
- 不要依赖 UA 字符串硬匹配 Android 版本——很多定制 ROM 或 WebView 替换包内核版本和系统版本严重脱节
- 用运行时检测更可靠：
document.documentElement.style.setProperty('--test', 'ok') !== undefined，返回false就说明变量不可写 - 若检测失败，立刻加载降级样式表或切换 class 名（如给
加no-cssvars类）
postcss-custom-properties 降级在安卓构建中失效的常见原因
即使你配了 PostCSS 插件，生成的 CSS 在安卓低版本仍显示异常，大概率不是插件没起作用，而是它根本“看不见”变量定义。
关键限制点：
- 变量必须是静态可求值的：不能含
calc()、不能引用另一个未展开的变量（如--c: var(--a);）、不能是 JS 动态注入的值 - 作用域必须显式覆盖：如果变量定义在
.theme-dark { --bg: #111; }里，而你在.btn里直接写background: var(--bg)，插件不会跨选择器推导，结果就是未替换 - 插件顺序错误：如果
postcss-custom-properties在autoprefixer之后运行，某些带前缀的规则可能已变形，导致变量匹配失败
验证方式：构建后打开输出 CSS，搜索 var(-- —— 如果还有残留，就说明上述某条被触发了。
安卓 4.4–4.4.4 上 filter: drop-shadow() 和 CSS 变量混用会出问题
这不是变量本身的问题，而是老 WebKit 内核对 filter 渲染管线的 bug：当元素同时使用 transform（尤其是 translateY）和 drop-shadow，再叠加 var() 控制颜色或尺寸时，阴影可能截断、偏移甚至消失。iOS Safari 同样存在，但安卓 4.4 系列表现更不稳定。
绕过方案：
- 避免把
drop-shadow的颜色/模糊值交给变量控制，改用预设类名切换（如.shadow-red/.shadow-blue） - 对需要动态阴影的场景，改用伪元素 +
box-shadow模拟，它在老安卓上兼容性好得多 - 如果必须用
filter，确保transform和filter不在同一元素上共存，拆到父子容器中
Android WebView 中 link 加载 CSS 变量文件失败的隐蔽路径问题
在 Android 原生 WebView 中， 经常 404，不是因为路径写错，而是 WebView 默认不支持相对路径解析逻辑，尤其当 HTML 是通过 loadDataWithBaseURL(null, ...) 加载时，base URL 为空，所有相对路径都会失效。
必须显式指定 base URL：
- 用
file:///android_asset/开头（CSS 放 assets 目录下）： - 或调用
loadDataWithBaseURL("file:///android_asset/", html, ...)，让相对路径以 assets 为根 - 检查 Network 面板：老 WebView 不会显示 CSS 请求，得靠
console.error或 JS 检测document.styleSheets长度是否符合预期
变量定义位置也容易踩坑：如果 vars.css 在 HTML 底部 前引入，但样式规则在 里就用了 var(--x)，浏览器按顺序解析，此时变量尚未定义，就会 fallback 到初始值或 unset。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
