旧版 safari（ios 12.0 前、macos safari 11.1 及更早）完全不解析 --foo 自定义属性和 var(--x)，连 fallback 都不执行；可靠写法是无条件 fallback + @supports (--primary: red) 双层结构，并确保单位显式一致。
旧版 Safari（iOS 12.0 之前、macOS Safari 11.1 及更早）完全不解析 --foo 这类声明，var(--x) 会被整条丢弃，不是降级失败，是压根不读。PostCSS 插件能解决，但只对静态变量有效，JS 动态设置的变量无法转换。
postcss-custom-properties 必须配合静态变量定义
该插件在构建时把 color: var(--primary) 替换为 color: #007bff，前提是所有变量值在 CSS 中明确定义且不可被 JS 修改：
-
:root { --primary: #007bff; }✅ 可被替换 -
element.style.setProperty('--primary', 'red');❌ 运行时设置，插件无感知 - 变量值不能含 calc() 或嵌套 var()，如
--gap: calc(var(--base) * 2)会导致替换失败或结果错误
@supports(--x: red) 在旧 Safari 中根本不会执行
这个检测语法在 iOS 12.0 以下和 Safari 11.1 及更早版本中被整个忽略——连 fallback 规则都不会生效。真正可靠的写法是“无条件 fallback + @supports”双层结构：
button {
background-color: #007aff; /* 所有浏览器都读 */
}
@supports (--primary: red) {
button {
background-color: var(--primary);
}
}
注意：@supports (color: var(--x)) 是合法写法，但部分旧引擎支持不稳定；@supports (--x: red) 看似简洁，实则在目标环境里等于没写。
单位必须显式写出，不能省略
变量值带单位（如 --gap: 12px），fallback 值也必须带相同单位。否则老 Safari 会把无单位数字当无效值处理：
- ❌ 错误：
margin: var(--gap); margin: 12;→margin: 12不生效 - ✅ 正确：
margin: var(--gap); margin: 12px; - 变量若用于
font-size或line-height，fallback 同样要带px、rem等，不能只写数字
PostCSS 转换看似一劳永逸，但它掩盖了一个关键事实：一旦你依赖它，就等于放弃了运行时主题切换能力。所有“深色模式切换”“用户偏好覆盖”都得靠 JS 重写整套变量注入逻辑，而那部分在旧 Safari 里又得另起炉灶——静态替换和动态控制，本质上是互斥路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
