CSS变量在Safari 12–14中被整条忽略，var()语法不解析，后备值无效；必须用“无条件fallback+@supports(color: var(--x))”双层保底，PostCSS无法处理动态/嵌套变量，真机验证至关重要。
CSS变量在Safari 12–14中根本不会被解析，不是值没传过去，是整条var()声明被静默忽略——你写的color: var(--text)，浏览器直接跳过，连报错都没有。
为什么var(--x, #fff)在旧Safari里不兜底
后备值只在支持CSS变量语法的浏览器中生效。Safari 12–14连var()语法都通不过，压根不进解析流程，所以var(--x, #fff)里的#fff根本不会被读取。它不是“fallback失败”，而是“fallback根本没机会启动”。
- IE 11 和 Safari 12–14 表现一致：遇到
var()就整条丢弃，退回到继承色或属性初始值（比如color变成黑色） -
var(--x, initial)或var(--x, unset)在这些版本里同样无效，且语义混乱，别用 - 后备值不能是另一个
var()，比如var(--x, var(--y))，老浏览器会直接卡死解析
必须前置无条件 fallback + @supports双层保底
只靠@supports不行，因为 Safari 12–13.3 会把整个@supports块当无效CSS跳过；只靠var(--x, #fff)也不行，如上所述。唯一可靠的是“无条件 fallback 写在前面 + @supports包住变量声明”：
button {
background-color: #007aff; /* 真实生效的兜底，所有浏览器都认 */
}
@supports (color: var(--x)) {
button {
background-color: var(--primary);
}
}-
@supports (color: var(--x))✅ 是唯一有效写法；@supports (--x: red)❌ 所有浏览器都不认 - fallback 必须写在
@supports块之前，顺序不能反，否则老浏览器看到空规则 - 变量名可以是任意合法名（比如
--_），不需要真实定义，只要格式对就行
PostCSS降级时最容易翻车的三个点
postcss-custom-properties插件不是万能翻译器，它只做静态替换，失败就留空。以下情况它完全无能为力：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 变量值本身含
var()，比如--primary: var(--accent)→ 无法递归解析，输出为空 - 变量定义在
@media内部，又被外部引用 → PostCSS 不跨上下文回溯，找不到定义 - JS动态设置的变量：
el.style.setProperty('--size', '16px')→ 构建时不可见，必须自己用no-cssvars类或matchMedia兜底 - 配置里
preserve: false必须设上，否则原始var()会保留，导致老浏览器二次失效
真机验证比本地预览重要十倍
你本地用 Chrome 或最新 Safari 跑着没问题，是因为现代浏览器自动 fallback；但一上 iOS 14.5 真机，所有var()全消失，页面只剩默认排版和黑色文字。务必在真实低版本 Safari 环境里检查最终输出的 CSS 是否已展开为具体值——不是看源码里有没有@supports，是看 DevTools 的 Computed 面板里background-color是不是#007aff。
最隐蔽的坑：Tailwind 用户常写text-[color:var(--text)]，这种动态值 PostCSS 完全识别不了，构建后仍是原样，上线即白屏。
