CSS变量在Safari 12–14中完全不生效，因内核未实现语法解析，整条var()声明被静默忽略；需用@supports(color: var(--x))检测并配合fallback值（如color: var(--text, #333)）保底。
为什么CSS变量在Safari 12–14里完全不生效
CSS变量（--color、--spacing-sm）在 Safari 12–14 中根本不会被解析，连语法都通不过。不是值没传过去，是浏览器直接忽略整条声明——比如 color: var(--text-primary) 这行会被静默跳过，退回到继承色或初始值。IE 是彻底不支持，而这些旧版 Safari 属于“半支持”：能写，但用不了。
@supports (color: var(--x)) 是唯一靠谱的检测方式
别用 @supports (--x: red)，这是无效语法，所有浏览器都不认。真正能用的是检测“使用变量”的行为：
-
@supports (color: var(--x))✅ Safari 15.4+、Chrome 62+、Firefox 60+ 都支持 - 必须配合 fallback 值：
color: var(--text-primary, #333)，否则 fallback 不生效 - 不能只靠这个：IE 完全不支持
@supports，所以得叠加 class 检测（如给<html class="no-cssvars">）
PostCSS 变量降级必须满足三个硬条件
postcss-custom-properties 插件不是万能翻译器，它只在构建时做静态替换，失败就留空。常见翻车点：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 变量定义必须是静态常量：
--primary: #007bff✅，--primary: var(--accent)❌（无法递归解析） - 不能出现在媒体查询内部再被外部引用——PostCSS 不跨上下文回溯
- JS 动态设置的变量（
el.style.setProperty('--size', '16px')）完全不可降级，这部分逻辑得自己兜底 - 配置里
preserve: false必须设上，否则会保留原始var()导致老浏览器二次失效
Tailwind 用户最容易漏的两件事
Tailwind 默认不处理 CSS 变量兼容性，尤其在用 theme() 或自定义插件时：
立即学习“前端免费学习笔记（深入）”；
- 不要直接写
text-[color:var(--text)]—— 这种动态值无法被 PostCSS 识别和降级 - 全局主题色建议用
:root集中定义，避免组件级变量（如.btn { --bg: blue }）导致作用域混乱 - 如果用了
tailwindcss/forms，它对::-webkit-date-and-time-value有封装，但对var(--input-bg)无感知，仍需手动 fallback
最隐蔽的问题是：你本地跑着没问题，是因为现代 Chrome 自动 fallback；一上 iOS 14.5 的真机，所有 var() 都消失，页面只剩默认色和排版错乱。务必在真实低版本 Safari 环境里验证输出 CSS 是否已展开为具体值。
