@supports (display: grid)写对却没生效，根本原因是fallback位置反了：降级样式必须写在@supports外部同一选择器下，如先写.grid { display: flex; }，再用@supports (display: grid) { .grid { display: grid; } }，否则ie11等旧浏览器因忽略整条规则而失联。
为什么@supports (display: grid)写对了却没生效
不是语法错，而是 fallback 位置反了。@supports 块只负责“增强”，不承担降级职责——旧浏览器压根不解析整条规则，所以降级样式必须写在 @supports 外部、同一选择器下。
- ✅ 正确顺序：
.grid { display: flex; }（外层基础布局），再跟@supports (display: grid) { .grid { display: grid; } } - ❌ 错误写法：把
float或inline-block塞进@supports not (display: grid)块里——IE11 完全忽略该规则，降级失效 - 注意空格陷阱：
@supports not (display: grid)中not和括号间不能有空格，Safari ≤12.1 会静默跳过整条规则
@supports selector(:has()) 在 Safari 里返回 true 却不工作
@supports selector(:has()) 只测语法解析能力，不保证语义执行。Safari 16.4+ 才真正支持该函数，而 :has() 本身在 Safari 中是分阶段实现的：15.4 支持 :has(> img)，但 :has(+ div, ~ p) 这类复合形式直到 17.0+ 才稳定。
- 分两步验证：
@supports selector(:has(*))（基础存在性） +@supports selector(article:has(> h2))（实际使用场景） - Safari 16.3 及更早版本会完全忽略
selector()整条规则——不是返回 false，是压根不进判断逻辑 - 永远搭配 class 降级：比如用 JS 检测到
:has()不可用时，给容器加.no-has类，用 class 驱动 fallback 样式
检测 color-mix() 或 oklch() 时总失败
不能写 @supports (color-mix: ) 或 @supports (color: oklch)——前者特性名不存在，后者值不合法。这类色彩函数必须带完整、可解析的调用形式，否则浏览器直接跳过整条 @supports 规则。
- ✅ 正确检测
oklch()：@supports (color: oklch(0% 0 0)) - ✅ 正确检测
color-mix()：@supports (color-mix(in srgb, black, white))（必须含色彩空间和参数） - ⚠️ fallback 颜色不能用 hex 或 rgba 混搭：如果现代色是
oklch(60% 0.2 240)，fallback 必须是rgb(114, 147, 234)或rgba(114, 147, 234, 0.9)，不能用#7293ea—— 旧 WebView 可能因透明度缺失而丢弃整条声明
@supports (color: var(--x)) 能否检测 CSS 变量支持
可以，但必须用属性赋值形式检测，不能直接检测变量声明。IE 和老版 Safari（如 9.1）连 var(--x) 语法都解析失败，所以检测目标不是 --x 是否存在，而是 color: var(--x) 这一声明能否被引擎接受。
- ✅ 正确写法：
@supports (color: var(--_))（变量名任意，只要格式合法） - ❌ 错误写法：
@supports (--x: red)—— CSS 规范未定义这种检测语法，所有浏览器都会忽略 - 务必配合 fallback：先写
color: #4a5568;，再写@supports (color: var(--x)) { color: var(--x); }，否则 Safari 9.1 会丢弃整条 color 声明
@supports，而是它只在解析阶段跑一次，且粒度细到只认“这一行 CSS 能不能被当前引擎无错误消化”——写错一个空格、漏一个括号、选错 fallback 位置，都会让整个兼容链断裂。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
