IE11及Android 4.4 WebView不解析var()，整条声明静默丢弃；必须前置静态值（如color: #333; color: var(--c, #333)）、PostCSS设preserve: false移除var()行，并避免calc()、JS动态变量等不可降级场景。
不能靠 var(--x, #fff) 在 IE11 或 Android 4.4 WebView 里兜底——这些浏览器连 var() 语法都不认识，整条 CSS 声明会被静默丢弃，不是颜色没变，而是样式直接消失。
IE11 及更早版本必须彻底移除 var() 调用
PostCSS 插件 postcss-custom-properties 默认只追加降级值（如 color: #007bff; color: var(--primary);），但 IE 看到第二行就跳过，最终取继承值或 initial（文字变黑、背景变透明）。只有显式设置 preserve: false，才会真正删掉含 var() 的行，只保留静态值。
- Webpack/Vite 中必须确保该插件在
autoprefixer之前运行，否则可能被覆盖 - 若同时使用
css-vars-ponyfill，就不能开preserve: false——否则 ponyfill 找不到原始var()无法注入 - 构建后务必打开产出的 CSS 文件，全局搜索
var(--；若有残留，说明变量定义跨文件、含calc()、或由 JS 动态设置（插件完全看不见）
哪些变量能被 PostCSS 安全降级
PostCSS 是编译期工具，只能处理静态、可确定的值。它看不到 JS 设置的变量，也读不到媒体查询里动态定义的内容。
- ✅ 安全：定义在
:root里的纯常量，如--color: #007bff;、--gap: 12px; - ❌ 不安全：
--size: calc(1rem + 2px);、--c: var(--base);、@media (min-width: 768px) { :root { --gap: 16px; } } - 局部作用域变量（如
.card { --pad: 1rem; }）默认不处理，除非显式配importFrom指向该文件
复合属性和 fallback 写法必须拆解
background、border、font 这类复合属性一旦含 var()，旧浏览器会丢弃整条声明，而不是局部降级。例如 background: var(--bg, #fff) url(img.png) no-repeat; 在 IE 里第二行完全无效，背景变成 transparent。
立即学习“前端免费学习笔记（深入）”；
- 正确写法是拆成原子属性：
background-color: #fff; background-color: var(--bg, #fff);+background-image: url(img.png); - fallback 必须前置且在同一规则块内：
color: #333; color: var(--text-color, #333);——顺序不能颠倒，也不能拆到不同 class 或文件中 -
@supports (background: var(--x))在 IE 中本身不被识别，整条规则被忽略，起不到任何降级作用
运行时检测应优先于 UA 判断
不要依赖 User-Agent 字符串硬匹配 Android 版本——很多定制 ROM 或 WebView 替换包内核版本和系统版本严重脱节。
- 更可靠的方式是运行时检测：
document.documentElement.style.setProperty('--test', 'ok') !== undefined，返回false就说明变量不可写 - 检测失败后，立刻给
加no-cssvars类，再写.no-cssvars .btn { background: #007bff; } - JS 检测应使用
CSS.supports('color', 'var(--_)')，而非CSS.supports('--_')（后者在 IE 报TypeError）
最易被忽略的是：所有降级逻辑都建立在“变量定义可静态求值”这个前提上。一旦你用 JS 动态设置 --theme，或在媒体查询里切换 --breakpoint，PostCSS 就完全失效——这时候只能靠 JS 注入内联样式或 class 切换来兜底。
