只能用 @supports (color: oklch(0% 0 0)) 检测，因为它是唯一被 chrome 112+、firefox 121+、safari 17.4+ 实际实现并返回 true 的语法，其他写法因浏览器解析差异或未启用功能而失效。
必须用 @supports (color: oklch(0% 0 0)) 检测，其他写法基本无效——@supports (color: oklab(0 0 0)) 在所有主流浏览器中都返回 false，@supports not 在部分安卓 WebView 中解析异常。
为什么只能用 oklch(0% 0 0) 做检测？
这是唯一被 Chrome 112+、Firefox 121+、Safari 17.4+ 实际实现并返回 true 的语法。浏览器对色彩空间的支持是逐函数落地的：oklab() 函数本身未被广泛启用，color-mix() 的支持更晚且依赖额外上下文，所以不能拿它们当判断依据。
-
@supports (color: oklch(0 0 0))❌ 缺%，旧 Safari 直接不识别整条规则 -
@supports (color: oklab(0% 0 0))❌ 所有当前浏览器（含 Safari 17.4）仍返回false -
@supports not (color: oklch(0% 0 0))❌ 部分安卓 WebView 解析失败，导致整个@supports块被跳过
@supports 必须写在 fallback 颜色之后
CSS 是从上到下解析的。如果把 @supports 块写在前面，某些旧版 Chromium（如 Chrome 111 及更早）会忽略后续所有声明，最终页面没颜色可显示。
- ✅ 正确顺序：
background-color: #2563eb;→ 再写@supports (color: oklch(0% 0 0)) { … } - ❌ 错误顺序：先写
@supports块，再写 fallback，部分环境 fallback 完全不生效 - fallback 必须是广泛支持的格式：
#rrggbb、rgb()、hsl()，不能是oklch()或color-mix()输出
检测值必须带单位，且不能简化
oklch(0% 0 0) 是最小合法输入，但单位缺一不可。浏览器不会自动补全或宽容解析——漏 %、多空格、加 deg 都可能让检测失败。
-
oklch(0% 0 0)✅ 安全，所有支持 OKLCH 的浏览器都能识别 -
oklch(0 0 0)❌ L 缺%，Safari 16.x 和部分 WebView 返回false -
oklch(0% 0.0 0.0)❌ C/H 用了小数但没单位，Chrome 112–115 某些版本拒绝解析 -
oklch(0% 0 0deg)❌deg在 Safari 16.4–17.3 中触发解析失败
真正容易被忽略的是：检测语句里的 0% 0 0 不是随便写的占位符，它必须严格匹配规范定义的“合法最小值”，且顺序、空格、单位一个都不能动——哪怕多一个空格，某些安卓 WebView 就判定为无效语法，整个 @supports 块失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
