正确顺序是先写 fallback 样式再用 @supports 包裹增强样式；@supports 检测需合法声明对，不可依赖 not 作主降级，自定义属性和选择器须按规范检测。
先写 fallback，再写 @supports 块
旧浏览器（如 IE11、Android 4.4 WebView）根本不解析 @supports 语法，整条规则会被直接丢弃。如果你把降级样式（比如 background-color: rgb(74, 111, 165)）塞进 @supports 块里，这些浏览器就什么也看不到。
正确顺序是：裸写兼容性确定的样式在外层，再用 @supports 包裹增强部分。
- ✅ 正确：
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: rgb(74, 111, 165); }（第二行在旧浏览器中无效） - rgba() 带透明度时，fallback 必须用
rgba(74, 111, 165, 0.9)，不能用#4a5568—— 后者无 alpha 通道，语义不等价
@supports 检测必须写合法的声明对
@supports 不是检测“属性是否存在”，而是检测“某属性 + 某值”这一对是否被支持。只写属性名、或值非法、或浏览器尚未实现该值，都会导致整块规则被跳过。
- ❌
@supports (display)—— 缺值，语法错误 - ❌
@supports (color-mix: )——color-mix不是属性名，是函数，不能这样检测 - ✅
@supports (color: lch(0% 0 0))——lch()已稳定支持 - ✅
@supports (color-mix(in srgb, black, white))—— 必须写完整调用形式 - ✅
@supports (grid-template-columns: subgrid)—— 检测 subgrid 要单独写，不能靠display: grid推断
别依赖 @supports not 做主降级路径
@supports not 在 Safari ≤12.1 中对空格、换行极其敏感，稍有不慎就静默失效；IE11 更是完全不识别 @supports，整条规则归零。把它当主要 fallback 开关，等于放弃旧环境。
- ❌
@supports not (display: grid) { .container { display: flex; } }—— IE 里这行根本不会生效 - ✅ 正确做法：先写
.container { display: flex; }（基础可用），再用@supports (display: grid) { .container { display: grid; } }增强 - 避免嵌套
@supports not—— Safari 14 之前会崩溃解析 -
@supports not只适合补充逻辑，比如禁用某个动画效果，而非承担布局兜底职责
检测自定义属性和选择器要特别小心
自定义属性（CSS 变量）和新伪类（如 :has()）的检测方式和普通属性不同，错用会导致条件永远为 false。
- ❌
@supports (color: var(--c))—— 这是在检测值计算能力，不是变量本身支持度 - ✅
@supports (--css: variables)—— 规范写法，检测 CSS 自定义属性是否可用 - ❌
@supports (:has(div))—— 语法不合法 - ✅
@supports selector(:has(*))—— 必须用selector()函数包裹 - 但注意：
selector()检测仅作覆盖参考，不可作为唯一依据；:has()实际使用仍需配合 JS 打标（如[data-has-loaded] .container:has(> .item)）确保回退安全
实际项目里最容易被忽略的点，是把 @supports 当成 JS 的 if/else —— 它没有运行时逻辑，不支持变量、不支持 fallback 回调，只是静态解析时的一次“开关”。你写的每一条降级样式，都得独立存在、语义明确、且能被所有目标浏览器原生执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
