低版本浏览器忽略@supports规则，兜底样式必须独立写在外部且语法兼容css2.1；@supports not不可靠，检测需用合法属性值对；safari≤15.3等不支持selector()需js替代。
低版本浏览器（如 IE11、Android 4.4 WebView、Safari ≤12.1）根本不会解析 @supports 规则，整块 CSS 被静默跳过——所以兜底不是“让它进 fallback 分支”，而是确保降级样式独立存在、语法合法、位置靠前。
兜底样式必须写在 @supports 外部且顺序不可颠倒
旧浏览器遇到不认识的值（比如 oklch()、clamp()、color-mix()）会跳过整条声明；如果把 @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 (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); }→ 后面再跟background-color: #4a5568; - fallback 颜色只能用
#rrggbb、rgb()、rgba()、hsl()、命名色；带透明度必须用rgba()，不能用 hex + alpha
@supports not 不是降级开关，IE 里它等于不存在
@supports not (display: grid) 在 IE11 中不会触发任何样式，因为 IE 连 @supports 语法本身都不识别，整块规则被丢弃。你以为写了降级，其实旧浏览器根本看不到那行代码。
- ✅ 可靠做法：先裸写基础布局，例如
.container { display: flex; }，再用@supports (display: grid) { .container { display: grid; } }做增强 - ❌ 不要依赖
@supports not承担主降级职责，尤其不能把它当“else 分支”来用 - Safari ≤12.1 对
not后的空格、换行极其敏感，稍有不慎就静默失效
检测目标必须是合法 CSS 声明对，不是任意字符串
@supports 只认标准属性 + 合法值的组合，其他全静默忽略——不报错、不警告、不执行内部样式。很多人写 @supports (min-width: 768px) 或 @supports (--primary: #000)，结果整块规则消失。
- ✅ 合法检测：
@supports (display: grid)、@supports (font-size: clamp(0px, 0px, 0px))、@supports (container-type: inline-size) - ❌ 非法检测：
@supports (min-width: 768px)（这是媒体查询语法）、@supports (var(--x))（var()不是独立属性）、@supports (color-mix: )（特性名错误，应检测调用形式） - Safari ≤15.3、Firefox ≤108、IE11 完全不支持
@supports selector(:has(a))，JS 层要用CSS.supports('selector(:has(a))')替代，且需先判空
IE11 兜底必须用纯 CSS2.1 兼容语法，不能混现代特性
IE11 完全忽略 @supports 块，但它能读取外部 fallback —— 前提是那行声明独立、未被包裹、语法兼容。一旦混入 gap、aspect-ratio、inset-inline-start 等，整条规则会被跳过。
- ✅ IE 可用的 fallback：
float: left、display: table-cell、margin-left: 10px、filter: alpha(opacity=80) - ❌ IE 无法解析的写法：
gap: 1rem、aspect-ratio: 1/1、margin-inline-start: 1rem（哪怕只出现在同一选择器的另一条声明里） - 变量降级必须靠 JS 注入 class：
document.documentElement.classList.add('no-cssvars')，再写两套样式，@supports单独扛不住
真正难处理的不是检测逻辑本身，而是 fallback 是否能在所有目标浏览器中稳定生效——它得是 IE11 能 parse 的、Android 4.4 WebView 不会跳过的、Safari 12.1 不会因空格崩掉的那几行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
