oklch()在旧浏览器中静默失效，必须用@supports(color:oklch(0% 0 0))检测并配合外部fallback（如#2563eb），且顺序、语法、格式三者缺一不可。
oklch() 在旧浏览器中不会报错，而是静默跳过整条声明——文字可能变透明、按钮失去背景色，这不是 bug，是 CSS 规范行为。必须用 @supports 检测 + 外部 fallback 的组合，且顺序、语法、格式三者缺一不可。
fallback 必须写在 @supports 块外部
CSS 是从上到下解析的。旧浏览器（如 IE11、Android 4.4 WebView、Chrome ≤110）遇到 oklch(60% 0.28 258.5) 这类不支持的值，会跳过该行，但继续读下一行；如果 fallback 写在 @supports 块里或块之后，部分早期 Chromium（Chrome 111 之前）会连后续同名属性也忽略。
-
✅ 正确写法：
background-color: #2563eb;<br>@supports (color: oklch(0% 0 0)) {<br> background-color: oklch(60% 0.28 258.5);<br>} -
❌ 错误写法：
@supports块写在第一行，background-color: #2563eb放第二行 —— IE11 虽然忽略@supports块，但某些 WebView 会连 fallback 行也跳过 - IE11 完全不解析
@supports，但它能读取并应用独立、合法、未被包裹的#2563eb—— 前提是这行没混入任何新语法（比如gap或inset）
@supports 检测必须写对色彩空间语法
@supports 不是检测“浏览器认不认识 oklch() 这个字符串”，而是检测它是否支持将该值作为 color 属性的有效取值。参数格式错一个，整个检测就静默失败，现代浏览器也不会进块内。
-
✅ 正确检测：
@supports (color: oklch(0% 0 0))（L带%，C是小数，H无单位） -
❌ 错误检测：
@supports (color: oklch(0 0 0))（L 缺 %）、@supports (color: oklab(0 0 0))（主流浏览器仍返回false）、@supports (color-mix: ...)（语法非法，整块丢弃） - 检测
color-mix()要写完整调用：@supports (color-mix(in srgb, red, blue))，仅 Chrome 117+/Firefox 119+ 支持
fallback 颜色只能用广泛支持的格式
旧浏览器不认识 oklch()、color-mix() 输出值，也不认识带 alpha 的 hex（如 #2563eb80）。一旦 fallback 行用了这些，整条声明会被跳过，最终没颜色可渲染。
-
✅ 允许的 fallback：
#2563eb、rgb(37, 99, 235)、rgba(37, 99, 235, 0.9)、hsl(216, 81%, 53%)、命名色如steelblue -
✅ 含透明度时：必须用
rgba()，不能用 hex + alpha（浏览器不识别） -
❌ 禁止的 fallback：
oklch(60% 0.28 258.5 / 0.9)、color-mix(in srgb, red, blue)、oklab(0.6 0.2 0.3)
UnoCSS 等工具链中 OKLCH 的兼容性现实
截至 2025 年 10 月，UnoCSS 的 preset-mini 和 preset-wind3 均未内置 OKLCH 解析逻辑，也没有自动降级为 RGB 的转译流程。这意味着你不能依赖构建工具帮你补 fallback。
- 手动维护两套值（OKLCH + HEX/RGB）可行但易出错，尤其当主题变体多时
- 推荐用 CSS 变量中转：在
:root中定义--color-primary: rgb(37, 99, 235);，再用@supports覆盖：@supports (color: oklch(0% 0 0)) { :root { --color-primary: oklch(60% 0.28 258.5); } } - 注意：自动转换工具（如
postcss-oklab）会对超出色域的颜色做 clamp，蓝紫/高饱和绿区域容易发灰，视觉失真明显
@supports 块只是现代浏览器的增强层，它本身不具备兜底能力。漏掉顺序、写错检测语法、或用了不兼容的 fallback 格式，都会导致旧浏览器彻底无样式可渲染。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
