fallback 颜色必须写在 @supports 外部且声明在前，否则 IE11 或旧 WebView 可能整条 background 不渲染；需用 #rrggbb、rgb()、rgba() 等广泛支持格式，不可用 oklch() 等新函数输出值。
直接写 fallback 颜色，且必须放在 @supports 外部、声明顺序不能颠倒——否则 IE11 或旧 WebView 可能整条 background 都不渲染。
fallback 颜色必须写在 @supports 外部
CSS 是从上到下解析的。旧浏览器（如 IE11、Android 4.4 WebView）遇到不认识的颜色值（例如 oklch(60% 0.2 240) 或 color-mix(in srgb, red, blue)）会跳过整条声明，但继续读下一行。如果把 @supports 块写在前面，fallback 写在后面，部分早期 Chromium（Chrome 111 之前）会连 fallback 行也忽略。
- ✅ 正确顺序：
background-color: #4a5568;→ 再写@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); } - ❌ 错误顺序：把
@supports块放在第一行，fallback 放第二行 -
@supports本身在 IE11 中被整块忽略，但外部 fallback 仍可生效——前提是它独立存在、未被包裹
只能用广泛支持的颜色格式作 fallback
新颜色函数输出（oklch()、color-mix() 结果）不能当 fallback 值，旧浏览器不认识它们，会跳过整条声明，最终可能继承透明或默认色，导致文字“消失”。
- ✅ 允许的 fallback 格式：
#rrggbb、rgb()、rgba()、hsl()、命名色（如steelblue） - ✅ 如果原色带 alpha，fallback 必须用
rgba()，不能用 hex；例如rgba(74, 111, 165, 0.9) - ❌ 禁止用：
oklch()、lch()、color-mix()的输出值 - ⚠️ 注意：自动转换工具（如 postcss-oklab）对超出色域的颜色做 clamp，蓝紫/高饱和绿区域容易发灰，视觉失真明显
@supports 检测要写对色彩空间语法
别检测函数名，要检测色彩空间是否被支持。浏览器不认识 @supports (color-mix: ...) 这类写法，整块规则静默失效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确检测色彩空间：
@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也会失败
color-mix() 必须显式声明色彩空间
不写 in srgb 或 in oklch，Safari 会静默忽略整个函数，而不是 fallback 到 sRGB。Firefox 默认按 srgb-linear 混合，Chrome 和 Safari 用 srgb，行为不一致会导致同一行代码在不同浏览器里颜色偏灰。
- ✅ 必须写全：
color-mix(in srgb, red 50%, blue 50%)，不能省略in srgb - ✅ 输入颜色必须同属一个色彩空间；
color-mix(in srgb, var(--accent) 70%, transparent 30%)在深色背景下效果不可控，应明确写成color-mix(in srgb, var(--accent) 70%, #1e1e1e 30%) - ⚠️ 注意：
color-mix()在伪类（如:hover）中动态生效有风险——部分 Safari 版本重计算延迟或跳变
真正难处理的不是检测逻辑本身，而是 fallback 是否能在所有目标浏览器中稳定生效；@supports 块在 IE 中被整块跳过，所以外部 fallback 是否“干净退出”，得靠手动校验和真机测试确认。
