fallback 必须写在@supports外部且顺序前置，否则旧浏览器（如chrome 111前、部分webview）会忽略后续同名属性；检测需用@supports (color: oklch(0% 0 0))等合法值语法，不可用函数名或错误格式。
fallback 必须写在 @supports 外部，且顺序不能颠倒
旧浏览器（如 Chrome 111 之前、部分 WebView）遇到不支持的值（比如 oklch(60% 0.2 240)）会跳过整条声明，但会继续解析后续同名属性——前提是它们没被包裹在 @supports 块里。如果把 @supports 放前面、fallback 放后面，某些引擎会直接忽略后续所有 background-color 或 color 声明。
正确写法是：
button {
background-color: #4a6fa5;
@supports (color: oklch(0% 0 0)) {
background-color: oklch(60% 0.2 240);
}
}
-
@supports块本身在 IE11 等不支持它的浏览器中会被整块跳过，但 fallback 行仍有效 - 不要写成先
@supports后background-color: #...，那样 fallback 可能完全不生效 - 同一选择器内必须连续声明，不能拆到不同 class 或媒体查询里
检测语法必须匹配规范，不能靠猜
@supports 的检测项不是“函数名”，而是“属性值是否合法”。很多人想检测 color-mix()，却写成 @supports (color-mix: ...)，这在 Safari 16.4 之前根本不会识别，整块规则静默失效。
正确检测方式：
- 检测 oklch 支持：
@supports (color: oklch(0% 0 0)) - 检测 color-mix 支持：
@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——旧浏览器不认识它们，整条声明会被跳过，最终可能继承透明或默认色，导致文字不可见。
只允许用这些 fallback 格式：
-
#rrggbb、rgb()、rgba()、hsl()、hsla()、命名色（如steelblue） - 如果原色带 alpha，fallback 必须用
rgba()或hsla()，不能用 hex；例如rgba(74, 111, 165, 0.9) - 禁止用
oklch()、lch()、color-mix()的结果作为 fallback 值
注意自动转换工具的视觉陷阱
像 postcss-oklab 这类工具会把 oklch() 转成 hex，但它无法保证视觉等效性。因为 oklch 色域比 sRGB 宽，尤其在蓝紫、高饱和绿区域，转换后容易发灰或偏暗。
实际项目中：
- 别全依赖自动转换结果，关键按钮、品牌色必须手动校验对比
- 深色背景下用
oklch()时，fallback 的#hex要特别注意亮度是否足够，否则文字直接糊成一片 - 移动端 WebView（尤其 Android 12 以下）对新颜色函数支持更碎片化，建议在真机上验证 fallback 是否真正生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
