@supports 是增强开关而非兼容开关，降级样式必须写在外层；ios 15等环境不解析该语法而静默跳过，导致无fallback时白屏；检测需合法语法、合理特性，并注意js与css supports差异。
@supports 不是兼容开关，而是增强开关——降级样式必须写在外层，否则老旧浏览器根本收不到 fallback。
为什么@supports块里的样式在iOS 15或微信WebView里不生效
因为这些环境压根不解析 @supports 语法，整条规则被静默跳过，不是返回 false，而是“看不见”。你如果只把现代样式塞进 @supports，又没在外层写降级规则，页面就会白屏或布局崩塌。
- 错误写法：
@supports (min-height: 100dvh) { .hero { min-height: 100dvh; } }→ iOS 15 直接忽略，.hero没有高度 - 正确写法：先写
.hero { min-height: 100vh; }，再用@supports (min-height: 100dvh) { .hero { min-height: 100dvh; } } - 注意：兜底值必须是该浏览器能真正解析的语法，比如 IE11 不认
gap，就得用margin
@supports检测要避开语法陷阱
括号里必须是合法的属性+值对，且不能偷懒缩写。很多失败就卡在格式上。
-
@supports (display: grid)✅ 合法，空格、冒号、分号都规范 -
@supports display: grid❌ 缺括号，整条规则失效 -
@supports (grid-template-areas: "a b")⚠️ Safari ≤12.1 可能部分解析失败，建议换更稳的组合：@supports (display: grid) and (grid-template-columns: 1fr) -
@supports (--color: red)✅ iOS 12.0+ 才返回 true；iOS 11.4 会跳过整个块，所以 fallback 必须无条件存在
哪些特性值得检测，哪些不值得
优先检测「有成熟 fallback + 支持断层明显」的特性。别为实验性功能白费力气。
- 值得检测：
display: grid（IE 完全不支持）、aspect-ratio（Chrome 88+/Firefox 89+ 才稳定）、inset（需写@supports (inset: 0)，不能简写成@supports (env(safe-area-inset-top))） - 不值得单独检测：
gap——它依赖容器是flex或grid，单独测无意义；color-mix()——2026 年仍仅 Chrome 实验性支持，@supports (color: oklab(0 0 0))基本全返回false - 伪类如
:has()：Safari ≤16.3 完全不识别selector()函数，@supports selector(:has())无效，得靠 JS +ResizeObserver动态加类
JS 和 CSS 的 @supports 不是一回事
别指望 window.CSS.supports('display', 'grid') 能等价替换 CSS 中的 @supports (display: grid)。前者是运行时查能力，后者是样式表解析时决定是否应用规则。
- 动态插入
@supports规则（比如用insertRule）多数浏览器会忽略，不可靠 - 推荐做法：用 JS 检测后加 class，比如
document.documentElement.classList.add('supports-grid')，再写.supports-grid .container { display: grid; } - 注意 SSR 场景：服务端无法执行
CSS.supports()，若首屏依赖 JS 检测，可能触发水合 mismatch - 某些场景必须 JS 补位：比如
env(safe-area-inset-top)，CSS 层只能靠@supports (padding-top: env(safe-area-inset-top))，但 iOS 15 之前连这个都认不了，得监听resize动态设--vh变量
最易被忽略的一点：所有 fallback 样式和现代样式必须使用相同选择器权重。写 .card 和 .legacy .card 看似保险，实则让老浏览器因权重更高而误用错样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
