低版本 Safari（≤14.0）对 CSS 变量是静默失效，需三步实锤：Elements 面板中 var() 显示灰色或删除线、Computed 中属性值为 inherit/initial、getComputedStyle 返回空字符串；必须双声明 fallback，如 color: #0d6efd; color: var(--bs-primary)。
低版本 Safari（≤14.0）对 CSS 变量（--xxx）的支持是“静默失效”——它不报错、不警告，只是直接跳过 var(--xxx) 声明，回退到继承值或初始值，导致按钮变透明、文字消失、间距归零。这不是配置问题，是内核级缺失。
怎么确认是不是 CSS 变量被 Safari 忽略了
别猜，三步实锤：
- 打开 Safari 开发者工具 → Elements 面板，找到用了
var(--bs-primary)的样式行，如果它显示为灰色或带删除线，说明未解析 - 切换到 Computed 面板，搜索
color或margin等属性，看实际计算值是否是你期望的变量值，还是inherit/initial/ 空 - 控制台执行
getComputedStyle(document.documentElement).getPropertyValue('--bs-primary')，返回空字符串""就确认变量未注册
为什么 color: var(--bs-primary) 在 Safari 13.1 里变成透明
这不是 Bootstrap 的错，是 Safari ≤14.0 对 var() 的实现缺陷：它压根不识别该语法，整条声明被丢弃，color 回退到父元素颜色或 initial（即 canvastext，在深色背景下可能接近透明）。
- 必须写成双声明：先硬编码 fallback，再跟
var()，例如color: #0d6efd; color: var(--bs-primary); - 不要只在局部覆盖，比如
.btn-primary { color: var(--bs-primary); }—— 没 fallback 就等于没写 -
calc(var(--bs-gutter-x) * .5)这类组合在 Safari ≤14.0 完全无效，calc()内部遇到var()直接返回invalid value
如何安全检测并降级 CSS 变量支持
@supports (color: var(--x)) 在 Safari 14.0 是伪支持陷阱：它返回 true，但实际不生效。真正可靠的运行时检测是 JS 判断：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 执行
document.documentElement.style.setProperty('--test', 'ok') !== undefined，返回false表示不可写 - 检测失败后，立刻给
加class="no-cssvars"，然后用独立 CSS 规则兜底：.no-cssvars .btn { color: #0d6efd; } - 避免用 PostCSS 插件（如
postcss-custom-properties）做构建时替换——它无法处理 JS 动态注入的变量，也推导不出嵌套作用域里的变量引用
Bootstrap 5 中哪些 --bs-* 变量最容易出问题
不是所有变量都一样危险。以下几类在 Safari ≤14.0 中最常引发静默崩溃：
-
--bs-body-color和--bs-body-bg：影响全局文本/背景，无 fallback 会导致大面积不可读 -
--bs-gutter-x/--bs-gutter-y：和gap、padding混用时，Safari 会把整条规则跳过，子项紧贴排列 -
--bs-emphasis-color：用于em、strong等语义标签，fallback 缺失会让强调效果完全丢失 - 所有参与
filter、backdrop-filter或transform的变量（如--bs-shadow-sm），老 WebKit 渲染管线会直接忽略含var()的整条 filter 声明
最易被忽略的是：变量 fallback 必须出现在同一声明块中，且不能依赖外部 class 或媒体查询条件——Safari 不会跨上下文求值，写了等于没写。
