@supports (color: oklch(0% 0 0)) 是唯一可靠、全平台可用的OKLCH支持检测方式，因其为浏览器一致识别的最小合法输入，其他写法在主流浏览器中多返回false或解析崩溃。
@supports (color: oklch(0% 0 0)) 是唯一可靠、全平台可用的检测方式。其他写法在 Chrome 112+、Firefox 121+、Safari 17.4+ 中基本都失败，不是返回 false 就是直接解析崩溃。
为什么只能用 oklch(0% 0 0) 做检测
这不是随便挑的占位值，而是浏览器实现中唯一被一致识别的最小合法输入：
-
@supports (color: oklch(0 0 0))❌ 缺%，Safari 16.x 和多数安卓 WebView 返回false -
@supports (color: oklab(0% 0 0))❌ 所有主流浏览器目前仍返回false，函数未启用 -
@supports (color: color-mix(in srgb, red, blue))✅ 可用，但它是另一套机制，不能代表 OKLCH 支持状态 - 多一个空格、少一个空格、
0.0写成0—— 部分安卓 WebView 会直接跳过整块@supports规则
@supports 必须写在降级色之后
CSS 解析是从上到下执行的。如果把 @supports 块写在前面，某些旧版 Chromium（如 Chrome 111 及更早）会忽略后续所有声明，导致 fallback 完全不生效。
- ✅ 正确顺序：
background-color: #2563eb;→ 换行 →@supports (color: oklch(0% 0 0)) { … } - ❌ 错误顺序：先写
@supports块，再写普通颜色声明，部分环境 fallback 彻底失效 - fallback 颜色必须用广泛支持的格式：
rgb()、hsl()、#hex、命名色；禁用oklch()、color-mix()、带 alpha 的 hex（如#2563eb80）
别碰 @supports not 这个坑
@supports not (color: oklch(0% 0 0)) 在部分安卓 WebView 中存在解析 bug，会导致整个 @supports 块被跳过，甚至引发样式链断裂。
立即学习“前端免费学习笔记（深入）”；
- 它不是“兜底方案”，而是风险开关
- 没有浏览器靠它正确 fallback；现代浏览器进不去，老浏览器又崩掉规则块
- 真要兼容旧环境，靠的是上方那条 fallback 声明，不是取反逻辑
最容易被忽略的一点：检测语句里的 0% 0 0 不是示意写法，它必须严格匹配规范定义的“合法最小值”——单位、空格、顺序一个都不能动。哪怕你在编辑器里多按了一个空格，某些低端安卓设备就判定为无效语法，整块 @supports 失效。
