@supports 是 css 原生兼容方案，但需注意：它检测语法识别而非真实渲染；实验性属性易假阴性；厂商前缀须与标准版用 or 并列；@container 检测受限且不支持嵌套；规则体内样式仍受各属性独立支持影响。
@supports 是解决新旧浏览器样式兼容最直接的 CSS 原生方案，但它不是“写了就管用”，关键在检测逻辑是否真实反映渲染能力。
为什么 @supports (display: flex) 有时不生效
它检测的是“声明语法是否被识别”，不是“属性是否真能渲染”。比如 Safari 15.6 会报告 font-synthesis: none 支持，但启用后文字变粗或错位；iOS 16.4 之前对 backdrop-filter 返回 false，实际却可渲染。
- 别拿
@supports检测实验性属性（如color-mix()、anchor-position），Safari 容易假阴性 - 对
contain类属性，优先用@supports (contain: layout)，paint在 Safari 16.6 中仍有误报 - 想兜底旧版 Safari（9–12），可用
@supports (-webkit-appearance: none)代理检测——它比标准appearance更早稳定
@supports + 厂商前缀的正确写法
Safari 不认单独带前缀的检测，比如 @supports (display: -webkit-flex) 会被静默忽略。必须把前缀版本和标准版本用 or 并列声明，且在规则体内按兼容顺序书写。
- ✅ 正确：
@supports (display: flex) or (display: -webkit-flex) { .box { display: -webkit-flex; display: flex; } } - ❌ 错误：
@supports (display: -webkit-flex) { ... }—— Safari 直接跳过整条规则 - 旧版 Safari（如 iOS 8.4）需要
-webkit-box，现代浏览器走flex，两者不能混在同一个声明里，必须分层 fallback
@container 和 @supports 混用时的陷阱
容器查询（@container）本身依赖父容器设 container-type，而 Safari 对它的特性检测支持滞后。直接套 @supports (container-type: inline-size) 没意义——这个属性本身就不在 @supports 的检测范围内。
- 真正要检测的是
@supports (container-name: --card)或@supports (container: --card / inline-size)（Chrome 111+ 才支持） - Safari 目前（截至 2026 年 4 月）不支持
@supports嵌套，内层规则会被静默丢弃，不能靠它做二级特性判断 - fallback 方案得靠媒体查询兜底：
@media (max-width: 768px) { /* 降级为基于视口的布局 */ }，而不是指望@supports覆盖@container
真正容易被忽略的是：@supports 规则体内的样式，仍受浏览器对其中每一条声明的实际支持程度影响。比如你在 @supports (backdrop-filter: blur(1px)) 里写了 font-optical-sizing: auto，而后者在 Safari 15 中不支持——那行样式照样失效。它只保“入口”，不保“内部”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
