低版本浏览器（ie11、safari 12–14、android 4.3 及更早）完全不解析 var(--x) 语法，整条 css 声明被静默丢弃，导致白屏或样式丢失；var(--x, #fff) 的后备值无效，因浏览器连 var() 函数名都识别不了，根本不会进入解析流程；postcss 降级需满足变量定义在 :root、值为静态常量、同一文件内等硬性条件，并配合 no-cssvars 类兜底。
低版本浏览器（IE11、Safari 12–14、Android 4.3 及更早）压根不解析 var(--x) 语法，整条 CSS 声明被静默丢弃——不是“显示异常”，是根本没执行。你看到白屏、文字消失、背景透明，大概率就是这个原因。
为什么 var(--x, #fff) 在 IE/Safari 旧版里完全不兜底
后备值只在支持 CSS 变量语法的浏览器中生效。IE11 和 Safari 12–14 连 var() 这个函数名都识别不了，压根不会进入解析流程，括号里的 #fff 根本不会被读取。它不是 fallback 失败，是 fallback 没机会启动。
-
color: var(--text, #333)在这些浏览器里等价于没写这行 -
var(--x, initial)或var(--x, unset)同样无效，且语义混乱 - 后备值不能是另一个
var()，比如var(--a, var(--b))，老浏览器会直接跳过整条规则
PostCSS 降级失败的三个硬性条件
postcss-custom-properties 是构建时静态替换工具，不是运行时 polyfill。它只对满足以下条件的变量起作用：
- 变量必须定义在
:root或显式作用域内（如.theme { --c: red; }），局部选择器如.btn { --bg: blue; }默认不处理 - 值必须是静态常量：
--size: 16px✅，--size: calc(1rem + 2px)❌，--c: var(--base)❌ - 变量定义和使用必须在同一文件，或通过
@import显式引入；JS 动态设置的document.documentElement.style.setProperty('--x', 'y')完全不可见
@supports 检测必须写对，且不能单独依赖
错误写法：@supports (--x: red) —— 所有浏览器都不认，语法非法。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
正确写法：@supports (color: var(--x))，变量名可以任意（甚至不存在），关键是检测“使用行为”。
- 这个检测只在支持
var()的浏览器中有效；IE11 本身不支持@supports规则，会直接跳过整个块 - 所以关键样式必须前置无条件 fallback：
background: #007bff;写在前面，再用@supports包住background: var(--primary); - 更稳妥的是运行时加 class：
document.documentElement.classList.add('no-cssvars')，再写.no-cssvars .btn { background: #007bff; }
Android WebView 和 Safari 的特殊坑
Android 4.4–4.4.4（Chromium 30）虽初步支持 var()，但极不稳定；Safari 12–14 则完全忽略。这两类环境还额外踩坑：
-
filter: drop-shadow()和var()混用会导致阴影截断或消失，尤其配合transform时；绕开方式是改用伪元素 +box-shadow - 媒体查询里不能出现
var()：@media (min-width: var(--sm))在任何浏览器都会被静默忽略 - 构建后务必检查输出 CSS：搜索
var(--，如果还有残留，说明降级链某处断了——常见是插件没启用、preserve: false没设、或变量定义位置不对
最易被忽略的一点：本地开发看着正常，是因为现代 Chrome 自动 fallback；一上真机（比如 iOS 14.5 或 Android 4.4 系统 WebView），var() 全消失，页面只剩默认色和错乱排版。验证必须在真实低版本环境里做，不能靠模拟器或 UA 伪装。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
