Safari 12–14 中 var() 完全不解析，整条声明被静默忽略，导致样式丢失甚至白屏；必须用 @supports (color: var(--x)) 检测并配合 fallback 值（如 color: var(--text, #333)）保底，且 PostCSS 降级仅支持静态变量、不处理嵌套或 JS 动态设置。
var() 在 Safari 12–14 中根本不会被解析，整条声明（如 color: var(--text)）被静默忽略，导致样式丢失、文字继承默认色或完全不可见——这不是“显示异常”，而是“没生效”，最终表现为白屏或排版错乱。
为什么 Safari 12–14 里 var() 会导致白屏
旧版 WebKit 内核压根没实现 CSS 自定义属性语法解析器。它不是取不到值，是连 var(--x) 这个 token 都不认识，直接跳过整行 CSS 声明。比如：
body { background-color: var(--bg, #fff); }
在 Safari 13 中，这行等价于没写；如果 --bg 是唯一控制背景的变量，且没 fallback，页面就变成透明底 + 白色文字 → 看起来就是白屏。
- IE 完全不支持
var()，但至少报错明显；Safari 12–14 是“静默失效”，最难排查 -
@supports (--x: red)检测无效，所有浏览器都无视这个语法，别用 - PostCSS
postcss-custom-properties插件对var(--a, var(--b))这类嵌套无能为力，构建后仍是空值
@supports (color: var(--x)) 必须配合 fallback 才有效
这是唯一能准确识别 Safari 是否支持 var() 的检测方式，但它只告诉你“能不能用”，不帮你兜底。
- 必须写成
color: var(--text, #333)—— fallback 值在括号里，逗号后不能有空格 - 如果只写
color: var(--text)，哪怕@supports成立，fallback 也不会触发 - IE 不支持
@supports，所以得叠加 HTML class 检测：，再用 JS 补充
PostCSS 降级失败的三个硬伤
postcss-custom-properties 不是运行时 polyfill，它只做静态文本替换，条件不满足就留空。
-
--primary: #007bff✅ 可降级；--primary: var(--accent)❌ 无法递归求值，输出为空 - 媒体查询内定义的变量（
@media (min-width: 768px) { :root { --size: 16px; } }），外部引用时 PostCSS 不会跨上下文查找 -
preserve: false必须显式配置，否则保留原始var()，老浏览器二次失效
Tailwind 用户最容易踩的坑
Tailwind 默认不处理 var() 兼容性，尤其在动态值场景下：
- 别写
text-[color:var(--text)]—— 这种 inline 值 PostCSS 根本不扫描，降级失效 - 全局变量集中写在
:root，避免组件级.btn { --bg: blue }，否则作用域混乱 + 降级漏掉 - 用了
tailwindcss/forms？它对var(--input-bg)无感知，仍需手动 fallback
最隐蔽的问题：你本地 Chrome 正常，是因为现代浏览器自动 fallback；一上 iOS 14.5 真机，所有 var() 消失，background-color 和 color 全退到初始值，页面只剩白底黑字或彻底空白。务必验证构建后的 CSS 是否已展开为具体值，而不是依赖 DevTools 的 computed 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
