老旧安卓浏览器（如Android 4.4 WebView、X5 v6.x）静默跳过@supports块及oklch()/grid/gap等现代语法，fallback必须独立写在@supports外部且顺序正确：先写基础样式（如background-color: #2563eb），再写@supports块覆盖；仅检测display: grid不可靠，应加grid-template-columns: 1fr验证模板能力；禁用@supports not和媒体查询嵌套，外链modern.css需用media属性控制加载。
老旧安卓浏览器（尤其是 Android 4.4 WebView、微信 X5 内核 v6.x 及更早）不解析 @supports，也不认识 oklch()、grid、gap 等现代语法，但它们不会报错，而是静默跳过整条声明——这意味着降级成败只取决于 fallback 是否独立、合法、且写在正确位置。
fallback 颜色必须写在 @supports 块外部，且顺序不能颠倒
Android 4.4 WebView 遇到 oklch(60% 0.28 258.5) 会跳过整条 background-color 声明；如果 @supports 块写在前面，它连后面那行 background-color: #2563eb 也一并忽略（Chromium 110 及更早版本有此行为）。
- ✅ 正确写法：
background-color: #2563eb;→ 换行 →@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.28 258.5); } - ❌ 错误写法：
@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.28 258.5); }→ 下一行才写background-color: #2563eb; - ⚠️ 注意：
@supports块本身在 Android 4.4 WebView 中被整块丢弃，但外部那行#2563eb能生效——前提是它没被包裹、没混入任何新语法（如gap或inset）
@supports (display: grid) 不足以兜底，得加模板语法验证
仅靠 @supports (display: grid) 会让 iOS Safari 10.1、部分 Android 5.0 WebView 误入 Grid 分支：它们认 display: grid，但不支持 fr 单位或 gap，结果布局碎裂。
- ✅ 推荐检测：
@supports (display: grid) and (grid-template-columns: 1fr)—— 同时验证 display 和核心模板能力，能准确筛掉 Android 4.4/5.0 WebView、IE11、X5 v6.x - ❌ 避免单独检测
@supports (gap: 1rem)—— Firefox 63 以前不支持，反而把大量现代浏览器拦在外面 - ⚠️ 降级样式必须用
float或inline-block，不能写display: flex后再覆盖——iOS Safari 15.4 等中间版本可能残留 Flex 行为，导致子项高度异常
别信 @supports not，老旧安卓根本不识别该语法
@supports not (display: grid) 在 Android 4.4 WebView 中不是“返回 false”，而是整条规则被忽略，连降级逻辑都进不去。Safari ≤12.1 对 not 后的空格和换行极其敏感，稍有不慎就静默失效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确路径：先裸写基础布局，例如
.card { float: left; width: 100%; }，再用@supports块覆盖增强 - ❌ 禁止写：
@supports not (display: grid) { .card { display: flex; } }—— 在 Android 4.4 上这条根本不会执行 - ⚠️ 不要嵌套
@supports not：Safari 14 之前会直接崩溃解析，而很多老旧安卓 WebView 基于旧版 WebKit
媒体查询不能塞进 @supports，但可用 media 属性控制外链加载
@supports (min-width: 768px) 是非法语法，所有浏览器都会忽略整块规则；老旧安卓 WebView 更是可能因此丢弃整张样式表。
- ✅ 外链控制：
<link href="base.css" rel="stylesheet">（无条件加载） +<link href="modern.css" rel="stylesheet" media="screen and (display: grid)">—— Android 4.4 不认识display: grid这个媒体特性，自然不加载modern.css - ❌ 禁止内联：
<style>@supports (display: grid) { @media (min-width: 768px) { ... } }</style>——@supports内部不支持@media，Chrome/Safari 会静默跳过 - ⚠️
@import在 Android 4.4 WebView 中风险极高：若 imported 文件含:has()或var(--x)，遇到第一个不支持语法就停住，后续所有声明全丢
真正卡住降级效果的，往往不是现代语法多难写，而是 fallback 那一行有没有被旧浏览器“看见”——它必须独立、合法、写在最上面，且不能依赖任何新特性做前提。
