@supports (color: oklab(0 0 0)) 始终返回 false，因主流浏览器均未稳定支持 oklab()；唯一可靠检测方式是 @supports (color: oklch(0% 0 0))，且语法必须严格符合规范。
@supports (color: oklab(0 0 0)) 始终返回 false，不能用于检测
目前所有主流浏览器（Chrome 117+、Firefox 121+、Safari 17.4+）对 oklab() 函数的支持仍极有限：Chrome 117+ 曾短暂支持但未稳定启用，Firefox 和 Safari 官方路线图中无实现计划，Safari 甚至不将 oklab(0 0 0) 解析为合法颜色值。因此 @supports (color: oklab(0 0 0)) 在任何当前生产环境浏览器中都返回 false，拿它做判断等于白写。
检测 OKLCH 是唯一可行的替代路径
oklch() 是 OKLab 空间在 CSS 中实际落地的函数，且已获 Chrome 112+、Firefox 121+、Safari 17.4+ 稳定支持。检测必须用其最小合法输入：
-
@supports (color: oklch(0% 0 0))✅ 唯一被三端一致识别并返回 true 的语法 -
@supports (color: oklch(0 0 0))❌ 缺%，Safari 16.x 及部分安卓 WebView 直接不识别整条规则 -
@supports (color: oklab(0% 0 0))❌ 所有浏览器均返回 false，不可替代
检测语句必须严格遵循格式，空格和单位一个都不能错
浏览器对 oklch() 检测值的解析非常苛刻，不是“大致能认”，而是按字面完全匹配规范定义的最小合法值：
-
oklch(0% 0 0)是唯一安全组合：L 必须带%，C 和 H 必须是无单位数字，H 后不能加deg -
oklch(0% 0.0 0.0)❌ C/H 用小数但无单位，Chrome 112–115 某些版本拒绝解析 -
oklch(0% 0 0deg)❌ Safari 16.4–17.3 触发解析失败 - 多一个空格（如
oklch(0% 0 0)）也会让某些安卓 WebView 判定为无效语法，整个@supports块失效
fallback 颜色必须写在 @supports 外部且顺序靠前
CSS 是从上到下解析的。如果把 @supports 块写在前面，旧版 Chromium（如 Chrome 111 及更早）会跳过后续所有声明，导致 fallback 颜色完全不生效：
- ✅ 正确顺序：
background-color: #4a5568;（先写广泛支持的 fallback），再写@supports (color: oklch(0% 0 0)) { ... } - ❌ 错误顺序：把
@supports块放在最前，后面才写 fallback —— 部分环境 fallback 彻底消失 - fallback 只能用
#rrggbb、rgb()、hsl()等广泛支持格式，不能是oklch()或color-mix()输出
0% 0 0 不是占位符，而是 W3C 规范定义的“最小合法输入”。它必须原样出现——单位、空格、顺序、数值类型全部固定。改一个字符，就可能让整个检测逻辑在真实用户设备上崩掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
