fallback 颜色必须写在 @supports 外部，否则旧浏览器会跳过整条声明；正确顺序是先写 fallback（如 background-color: rgb(74, 111, 165);），再写 @supports 块；检测语法须合法，如用 @supports (color: oklch(0% 0 0)) 而非 @supports (color-mix: ...)。
fallback 颜色必须写在 @supports 外部
旧浏览器遇到不认识的颜色值（如 oklch(60% 0.2 240)）会直接跳过整条声明，而不是降级到下一行——除非那行是独立、未被包裹的普通 CSS。把 background-color: #4a5568; 放在 @supports 块前面，才能确保 IE11、Android 4.4 WebView 等环境正常渲染。
常见错误是把现代样式写在前、fallback 写在后：@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); }background-color: #4a5568;
部分 Chrome 111 之前版本会忽略第二行，导致无背景色。
- ✅ 正确顺序：先写
background-color: rgb(74, 111, 165);，再写@supports块 - ❌ 不要用
oklch()或color-mix()的输出值当 fallback——旧浏览器不认识，整条声明失效 - rgba() 带透明度时，fallback 必须用
rgba(74, 111, 165, 0.9)，不能用 hex
@supports not 不是降级开关，只是补充规则
@supports not (display: grid) 这类写法不能单独承担降级职责。IE11 根本不解析 @supports 语法，整块规则被丢弃；旧 Safari（≤12.1）对 not 后面的空格或换行极其敏感，稍有不慎就静默失效。
真正可靠的路径是：先把 float 或 flex 基础布局裸写在外层，让所有浏览器都能执行；@supports 块只负责“增强”，比如覆盖 display、gap 等属性。
- ✅ 先写
.grid-item { float: left; width: 30%; }，再写@supports (display: grid) { .grid-item { float: none; } } - ❌ 不要写
@supports not (display: grid) { .container { display: flex; } }——IE 里这条根本不会生效 - 避免嵌套
@supports not，Safari 14 之前会直接崩溃解析
检测语法必须合法，不能靠猜
想检测 color-mix() 是否可用，写成 @supports (color-mix: ...) 是无效的——浏览器根本不认识这个特性名，整块规则被忽略。正确方式是检测它依赖的色彩空间是否就绪。
同样，@supports (color: oklab(0 0 0)) 在 2026 年中仍不可靠，主流浏览器返回 false；而 @supports (color: lch(0% 0 0)) 已稳定支持。
- ✅ 检测 oklch：用
@supports (color: oklch(0% 0 0)) - ✅ 检测 color-mix：用
@supports (color-mix(in srgb, black, white))（完整调用形式） - ❌ 不要省略
in srgb或混用色彩空间，如color-mix(oklch(...), red)会被 Safari 静默跳过
动画和 layout 特性检测要避开陷阱
检测 animation 时写 @supports (animation: fadeIn 0.5s) 看似合理，但实际依赖关键帧已定义——如果 @keyframes fadeIn 在后面才声明，某些浏览器会判定为不支持，即使它本该支持。
更稳妥的做法是检测底层能力，比如 @supports (animation-name: test) 或直接检测 transform、will-change 等更早普及的属性。
- ✅ 检测容器查询：
@supports (container-type: inline-size)（注意不是@supports (container: ...)） - ✅ 检测 aspect-ratio：
@supports (aspect-ratio: 16/9)，别漏掉斜杠格式 - ❌ 不要检测孤立的
gap，它必须配合display: grid或flex上下文才有意义
@supports 本身都解析不了，比堆砌新特性更重要。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
