必须用@supports(color: oklch(0% 0 0))检测并外部上方写fallback（如#2563eb），oklch()参数单位错一个（如l缺%、c用%、h加deg）即整条静默失效，旧浏览器跳过导致颜色消失或错乱。
不能直接写 oklch() 就上线，必须用 @supports 包裹且降级色写在它外面、上面，否则旧浏览器里颜色会消失或错乱。
oklch() 参数写错一个单位，整条声明就静默失效
浏览器不报错、不警告，也不往下找 fallback —— 它直接跳过这一行。这是线上颜色“突然变透明”“文字全黑”“按钮变白”的头号原因。
-
oklch(60 0.28 258.5)❌ L 缺%，Chrome 112+ 和 Safari 17.4+ 都拒斥 -
oklch(60% 28% 258.5)❌ C 必须是无单位小数（如0.28），不是百分比 -
oklch(60% 0.28 258.5deg)❌ H 后加deg在 Safari 16.x 和部分安卓 WebView 中解析失败 -
oklch(60% 0.28 258.5, 0.8)❌ alpha 必须用/分隔：oklch(60% 0.28 258.5 / 0.8)
@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 not (color: oklch(0% 0 0))—— 安卓 WebView 解析时会崩溃整块 CSS - 降级色必须写在
@supports块**外部且上方**：先写background-color: #2563eb;，再写@supports块，颠倒顺序会导致某些 Chromium 版本跳过 fallback
fallback 颜色只能用广泛支持的格式
旧浏览器不认识 oklch()，也不认识带 alpha 的 hex（如 #2563eb80）或 color-mix() 输出值。一旦 fallback 行用了这些，整条声明就被跳过，UI 直接没颜色可渲染。
- ✅ 允许的 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)
渐变和动画中跨色相边界必须手动拆段
CSS 对 oklch() 渐变不做短弧插值优化。比如从 oklch(0.7 0.25 350) 到 oklch(0.7 0.25 10)，浏览器会按 350 → 360 → 0 → 10 插值，中间经过灰紫色断层，不是你想要的顺滑过渡。
- 色相差超过 180° 时，必须手动拆成两段：
linear-gradient(to right, oklch(0.7 0.25 350), oklch(0.7 0.25 0), oklch(0.7 0.25 10)) - 不要依赖
calc()直接加减 L：oklch(40% 0.28 258.5)不是从60%减 20% 得来的，低 L 区域感知非线性极强，对比度可能断崖下跌 - 禁用态建议固定 L 和 H，只降 C：
oklch(22% 0.02 55)→oklch(22% 0.005 55)；若同时降 L，浅背景上文字易糊成一片
最常被忽略的是：WCAG 对比度不是靠 L 值推算出来的，同一 L 下不同 H（尤其蓝/紫系）视觉明度会塌缩，必须用 Chrome DevTools 的「Contrast」面板实测验证，不能凭参数直觉调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
