safari 12–14完全不解析var()语法，后备值无效；必须前置无条件fallback并配合@supports(color: var(--x))双层保底，postcss无法处理动态变量，真机验证必不可少。
因为 Safari 12–14（iOS 12.0–14.5）及更早版本的 WebKit 解析器压根不识别 --foo 语法，遇到 var(--x) 就整条声明静默丢弃，连后备值（var(--x, #fff)）都不会执行——这不是“解析失败”，是根本没进解析流程。
为什么 var(--x, #fff) 在 Safari 12–14 中完全不兜底
后备值只在浏览器支持 var() 语法的前提下才启用。Safari 12–14 连 var() 都当无效 token 跳过，根本不会触发 fallback 逻辑。结果就是：color: var(--text, #333) 在这些版本里等价于没写这条规则，元素颜色退回到继承值或初始值（比如黑色）。
-
var(--x, initial)或var(--x, unset)同样无效，且语义混乱，别用 - 后备值不能是另一个
var()，比如var(--x, var(--y))，老浏览器会卡死解析 - 单位必须显式一致：如果
--gap: 12px，fallback 就得写margin: 12px，只写12会被当无效值忽略
为什么 @supports (--x: red) 检测在 iOS 11–12.0 中等于没写
这个检测语法本身在 Safari 12.0 之前和 iOS 11.4 及更早中被整个 CSS 解析器跳过——@supports 块里的规则不会生效，连带里面的变量声明也一并消失。它不是返回 false，是直接不执行。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 唯一有效的写法是
@supports (color: var(--x))，但注意：括号右侧必须是属性 +var()组合，不能是--x: red - fallback 必须写在
@supports块之前，顺序不能反；否则老浏览器看到空规则，样式就没了 - 变量名可以是任意合法占位符（如
--_），不需要真实定义，只要格式对就行
PostCSS 替换为何在真机上仍失效
postcss-custom-properties 插件只做静态构建时替换，它看不见 JS 动态设置的值、跨媒体查询/选择器的作用域，也处理不了嵌套 var() 或含 calc() 的变量定义。构建后若输出 CSS 中仍有 var(--x)，说明插件根本没匹配到源头。
- 变量必须定义在
:root或全局作用域，不能藏在.theme-dark { --c: red; }里再被外部引用 - 配置中
preserve: false必须设上，否则原始var()会残留，导致老浏览器二次失效 - 插件顺序错误（比如在
autoprefixer之后运行）会让已加前缀的规则变形，变量匹配失败 - 验证方式很简单：构建后打开输出 CSS，搜索
var(--—— 如果还有，就说明上述某条被触发了
真正容易被忽略的是：Safari 对“变量何时可被读取”的判断极保守。它不等 JS 设置完就走 CSS 解析流程，也不重试。所以靠 el.style.setProperty('--x', '12px') 再指望后续 CSS 立即响应，在 Safari 里大概率失败——哪怕你紧接着调用了 getComputedStyle，也可能因渲染管线未刷新而取不到新值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
