@supports 在 Safari 中常因特性报告与渲染层不同步而失效，如 backdrop-filter 误报不支持、font-synthesis 误报支持；不支持嵌套、前缀检测需配合标准属性、无法检测自定义属性。
为什么@supports在Safari里有时不生效
@supports 本身是标准语法，但 Safari 对某些特性检测的实现存在延迟或偏差。比如 @supports (backdrop-filter: blur(1px)) 在 iOS 16.4 之前会返回 false，即使实际支持；又比如 @supports (font-synthesis: none) 在 macOS Safari 15.6 中被识别为支持，但启用后文字渲染异常。这不是写法错误，而是 Safari 的特性报告层和真实渲染层不同步。
常见错误现象：样式块没被加载、开发者工具里看到 @supports 规则被跳过、降级样式意外生效。
- 别用
@supports检测尚未进入稳定支持阶段的 CSS 属性（如color-mix()、anchor-position），Safari 可能返回假阴性 - 对
contain类属性，优先检测@supports (contain: layout)而非@supports (contain: paint)，后者在 Safari 16.6 中仍有误报 - 如果目标是 Safari 15.6+，可用
@supports (-webkit-appearance: none)作为代理检测——它比@supports (appearance: none)更早稳定
用@supports + -webkit-前缀做安全兜底
Safari 对厂商前缀的支持比标准属性更早也更稳，但 @supports 默认不认带前缀的语法。直接写 @supports (-webkit-flex: 1) 是无效的，必须配合标准属性一起声明。
使用场景：给 Flex 容器加兼容性 fallback，避免 iOS 13.3 下整个布局崩溃。
- 正确写法：
@supports (display: flex) or (display: -webkit-flex) { .container { display: -webkit-flex; display: flex; } } - 错误写法：
@supports (display: -webkit-flex) { ... }—— Safari 忽略该规则 - 当需要同时覆盖 Safari 9–12 和现代浏览器时，把
-webkit-版本放在前面，标准版放后面，确保旧版 Safari 能执行到
@supports嵌套时Safari的解析限制
Safari 目前（截至 2026 年 4 月）不支持 @supports 嵌套，即不能在 @supports 块内再写一层 @supports。它会静默忽略内层规则，而不是报错或降级处理。
常见错误现象：外层检测通过，内层特性没生效，控制台无提示，样式“消失”得莫名其妙。
- 避免写：
@supports (clip-path: polygon(...)) { @supports (transform: scale(1)) { ... } } - 改用扁平结构：
@supports (clip-path: polygon(...)) and (transform: scale(1)) { ... } - 若需分层控制，用两个独立的
@supports块，并确保它们作用于不同选择器或不同属性，避免覆盖冲突
Feature Queries和CSS自定义属性的组合陷阱
很多人想用 @supports (--my-var: 0) 检测 CSS 变量是否可用，但 Safari 从不支持这种写法——@supports 只能检测声明是否被识别，而自定义属性总是被识别（哪怕未定义），所以该检测永远返回 true。
这导致你以为做了 Safari 兜底，其实根本没触发。
- 不要用：
@supports (--primary-color: #000) { :root { --primary-color: #333; } } - 替代方案：用 JS 检测
CSS.supports('--primary-color', '#000')，或改用属性存在性检测（如@supports (background: paint(my-brush))这类真有支持差异的特性） - 若必须靠变量驱动兼容逻辑，把变量值设为一个 Safari 已知不支持的值（如
--use-mask: url(#fake)），再用@supports (mask: url(#fake))间接判断
真正难的不是写出 @supports，而是知道 Safari 在哪一行悄悄绕过了它。它不报错，也不警告，只是沉默地跳过——这点比任何语法错误都容易让人掉进坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
