fallback 必须写在 @supports 外部，因为 css 从上到下解析，旧浏览器遇到不支持的值（如 oklch）会跳过整条声明；若 @supports 块在前、fallback 在后，部分早期 chromium 和 webview 会忽略后续同名属性，导致无颜色渲染。
必须把 fallback 颜色写在 @supports 规则外部，且声明顺序不能颠倒——否则旧浏览器可能完全不渲染颜色。
为什么 fallback 必须写在 @supports 外面
CSS 是从上到下解析的，浏览器遇到无法识别的值（如 oklch(60% 0.2 240)）会跳过整条声明，继续尝试下一条。如果把 @supports 块写在前面，而 fallback 写在后面，部分早期 Chromium（Chrome 111 之前）和某些 WebView 会直接忽略后续所有同名属性声明。
- ✅ 正确：先写
background-color: #4a5568;，再写@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); } - ❌ 错误：把
@supports块放在前面，fallback 放在后面——旧环境可能一条都不生效 - ⚠️ 注意：
@supports块本身在不支持它的浏览器（如 IE11）中会被整块忽略，但 fallback 行仍能被读取，前提是它独立存在、未被包裹
@supports 检测要写对色彩空间语法，不是函数名
很多人想检测 color-mix() 是否可用，于是写成 @supports (color-mix: oklch(0% 0 0) 50%, red)，这在 Safari 16.4 之前根本不会被识别——浏览器不认识这个特性查询，整块规则静默失效。
- ✅ 正确检测色彩空间：
@supports (color: oklch(0% 0 0))或@supports (color: lch(0% 0 0)) - ✅ 检测
color-mix()本身（仅 Firefox 119+ / Chrome 117+ 支持）：@supports (color-mix(in srgb, black, white))—— 必须是完整、合法的调用形式 - ❌ 不要写
@supports (color: oklab(0 0 0))：截至 2026 年中，主流浏览器仍返回false，不可靠 - ❌ 不要省略参数或写错格式，例如
@supports (color-contrast(#000 vs #fff))缺少to WCAG20/AA也会失败
fallback 颜色只能用广泛支持的格式
新颜色函数（如 color-mix() 输出、oklch() 值）不能当 fallback 使用——旧浏览器不认识它们，就会跳过整条声明，最终可能继承透明或默认色，导致文字“消失”。
- ✅ 只能用：
#rrggbb、rgb()、rgba()、hsl()、命名色（如steelblue） - ✅ 如果原色带 alpha，fallback 必须用
rgba()，不能用 hex；例如rgba(74, 111, 165, 0.9) - ❌ 禁止用：
oklch()、lch()、color-mix()的结果作为 fallback 值 - ⚠️ 注意：自动转换工具（如
postcss-oklab）会对超出色域的颜色做 clamp，蓝紫/高饱和绿区域容易发灰，视觉失真明显
color-mix() 的空间一致性常被忽略
color-mix() 不写色彩空间时，Safari 会静默失败；混合色若跨空间（比如 oklch() 和 red），整个函数被忽略，而不是降级到 sRGB。
- ✅ 安全写法：
color-mix(in oklch, oklch(60% 0.2 240), oklch(40% 0.3 300)) - ❌ 危险写法：
color-mix(oklch(60% 0.2 240), red)——red是 sRGB 值，空间不一致 - ✅ 权重总和不必为 100%，浏览器会自动归一化，但输入颜色必须同属一个空间
- ⚠️ 透明色混合受父背景影响极大：
color-mix(in srgb, var(--accent) 70%, transparent 30%)在深色模式下很可能不可读，应明确指定替代色如#1e1e1e
最容易被忽略的一点：@supports 检测的是“能否解析该语法”，不是“是否渲染正确”。旧版 Safari（≤12.1）对 @supports (aspect-ratio: 1/1) 返回 true，但实际渲染异常；同样，@supports (color: oklch(0% 0 0)) 通过，不代表 color-mix() 就一定可用——得分开检测，且 fallback 永远得是那个最老实、最经得起考验的 rgb() 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
