oklch() 在旧浏览器中会静默失效，必须用 @supports (color: oklch(0% 0 0)) 检测并配合上方独立的合法 fallback（如 #2563eb），顺序、语法、格式三者缺一不可。
直接写 oklch() 在旧浏览器里会静默失效，最终可能变成透明或继承默认色——文字消失、按钮变白，不是 bug，是规范行为。必须用 @supports + 外部 fallback 的组合，且顺序、语法、格式三者缺一不可。
fallback 颜色必须写在 @supports 块外部且在上方
CSS 是从上到下解析的。旧浏览器（如 IE11、Android 4.4 WebView、Chrome 110 及更早）遇到 oklch(60% 0.28 258.5) 这类不支持的值，会跳过整条声明，但继续读下一行；但如果 @supports 块写在前面，部分早期 Chromium 会连后续同名属性（比如第二行 background-color: #2563eb）也忽略。
- ✅ 正确写法：
background-color: #2563eb;→ 紧接着写@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.28 258.5); } - ❌ 错误写法：把
@supports块放在第一行，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 - ✅ 如果原
oklch()含透明度，fallback 必须用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)
oklch() 参数单位错一个，整条声明就静默失效
这不是警告，是事实。浏览器不会报错、不发 warning、也不 fallback 到下一行——它直接跳过，就像那行 CSS 不存在。线上“颜色突然没了”，八成是这里写错了。
- ❌
oklch(60 0.28 258.5)（L 缺 %） - ❌
oklch(60% 28% 258.5)（C 用了百分比，必须是小数） - ❌
oklch(60% 0.28 258.5deg)（H 加 deg，Safari 16.x 和部分安卓 WebView 解析失败） - ✅ 安全写法只有两种：
oklch(60% 0.28 258.5)（兼容性最高），或oklch(0.6 0.28 258.5)（仅 Chrome 112+/Firefox 121+/Safari 17.4+，H 小数位建议 ≤1） - alpha 必须用
/分隔：oklch(60% 0.28 258.5 / 0.8)，不能用逗号
最易被忽略的点：不是“有没有 fallback”，而是“fallback 是否真被旧浏览器读到了”。它必须独立、在上、格式合法、且不能和 @supports 块共处同一选择器块内——哪怕只多一个空格或换行，某些 WebView 就会判定为“后续规则无效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
