@supports 仅检测css属性及值的支持性，不支持媒体查询语法；fallback须写在外部且用兼容颜色格式；对选择器检测需js辅助，ie完全不解析该规则。
@supports 不是用来替代 @media 的响应式开关，也不是万能的兼容性兜底工具。它只在你明确知道“某个 CSS 属性是否被支持”时才可靠生效——用错场景、写错语法、顺序颠倒，都会导致旧浏览器直接不渲染样式。
为什么 @supports (min-width: 768px) 会静默失效
这是最常踩的坑：@supports 只检测属性和值的支持性，min-width 是媒体查询条件，不是 CSS 属性。所有含 @media 语法的判断（比如 @supports (min-width: 768px) 或 @supports (width: 100vw)）都会被浏览器整条忽略，不报错、不警告、不执行。
-
@supports (display: grid)✅ 合法：检测布局能力 -
@supports (aspect-ratio: 16/9)✅ 合法：检测原生宽高比支持 -
@supports (container-type: normal)✅ 合法：注意不是(@container) -
@supports (color: oklch(0% 0 0))✅ 合法：检测色彩空间 -
@supports (color-mix(in srgb, black, white))✅ 合法：必须带完整调用形式
fallback 颜色必须写在 @supports 外部，且顺序不能反
旧浏览器（如 IE11、Android 4.4 WebView）遇到不认识的颜色值（如 oklch(60% 0.2 240)）会跳过整条声明。如果把 @supports 块写在前面，fallback 写在后面，部分 Chrome 111 之前版本和某些 WebView 会连 fallback 行也忽略。
- ✅ 正确写法：
background-color: rgb(74, 111, 165);→ 再写@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); } - ❌ 错误写法：把
@supports块放在第一行，fallback 放第二行 - fallback 只能用
#rrggbb、rgb()、rgba()、hsl()、命名色；带透明度必须用rgba()，不能用 hex -
@supports not (display: grid)不是降级开关——IE 根本不解析该规则，整块被丢弃，别指望它触发 fallback
@supports 对选择器无效，必须用 JS 运行时判断
@supports selector(:has(a)) 在 Chrome 110+ 才开始支持，Safari ≤15.3、Firefox ≤108、IE11 完全不识别该语法，连 fallback 都进不去。
- 真正可行的是 JS 检测：
CSS.supports('selector(:has(a))') - 但 IE11 不支持
CSS.supports()，需先判断是否存在该 API - 检测必须在 DOM ready 后执行，否则测试元素未挂载，结果不可靠
- 不要混用：既写
@supportsCSS 规则，又用 JS 注入降级样式——加载顺序不确定，容易覆盖
复杂点在于降级样式是否“干净退出”
真正难处理的不是检测逻辑本身，而是 fallback 是否能在所有目标浏览器中稳定生效。@supports 块在 IE 中被整块跳过，所以外部样式必须是它能解析的（比如 float、display: table），现代样式只能靠 JS 动态注入并确保选择器权重一致。Safari ≤12.1 对 and/or 复合条件极其敏感，空格或换行都可能导致解析失败——与其硬刚语法，不如拆成两个独立 @supports 块，或改用 class 控制更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
