必须先写兼容色再用@supports包裹oklch()，fallback需在外部且格式正确；@supports检测值须带单位、语法精准；oklch()参数格式敏感，错则整条声明静默失效。
必须先写兼容色，再用 @supports 包裹 oklch()，顺序颠倒或检测写错，旧浏览器会直接不渲染颜色。
fallback 颜色必须写在 @supports 外部且顺序固定
CSS 是从上到下解析的。浏览器遇到不支持的 oklch(60% 0.2 240) 会跳过整条声明，继续读下一条；但如果 @supports 块写在前面，部分 Chrome 111 之前版本和安卓 WebView 会连后续的 fallback 行也忽略。
- ✅ 正确：先写
background-color: #4a5568;，再写@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); } - ❌ 错误：把
@supports块放在第一行，fallback 放第二行 - ⚠️ 注意：
@supports在 IE11 中被整块忽略，但 fallback 行仍能生效——前提是它独立存在、未被包裹
@supports 检测值必须带单位且语法精准
检测不是写函数名，而是模拟一个合法但极简的值。浏览器按实际解析能力判断是否支持该色彩空间，错一个字符或单位就返回 false。
- ✅ 正确：
@supports (color: oklch(0% 0 0))（L 用%，C 是无单位小数，H 不带deg） - ❌ 错误：
@supports (color: oklch(0 0 0))（L 缺%）、@supports (color: oklch(0% 0% 0))（C 不能是百分比）、@supports (color: oklab(0 0 0))（截至 2026 年中仍不可靠） - ⚠️ 不要写
@supports not (color: oklch(0% 0 0))：安卓 WebView 存在解析 bug，可能整块失效
fallback 只能用广泛支持的颜色格式
旧浏览器不认识 oklch()、color-mix() 或其输出值，若把它们当 fallback，整条声明会被跳过，最终可能继承透明或黑色，文字“消失”。
- ✅ 允许的 fallback：
#rrggbb、rgb()、rgba()、hsl()、命名色（如steelblue） - ✅ 若原色带 alpha，fallback 必须用
rgba(74, 111, 165, 0.9)，不能用#4a5568（无透明通道） - ❌ 禁止的 fallback：
oklch()、lch()、color-mix(in srgb, black, white)等任何新函数或值
参数写错会导致整条声明静默失效
oklch() 对格式极其敏感：浏览器不报错、不警告，也不 fallback 到下一行，它只是跳过整条规则。上线后颜色“突然变灰”或“全黑”，大概率是这里出问题。
- ✅ 安全写法：
oklch(60% 0.28 258.5)（L 百分比、C 小数、H 无单位、alpha 用/分隔） - ❌ 常见错误：
oklch(60 0.2 240)（L 缺%）、oklch(60% 20% 240)（C 写成百分比）、oklch(60% 0.2 240deg)（H 加deg） - ⚠️ 注意：Safari 16.x 和部分安卓 WebView 对 H 值的小数位敏感，建议 ≤1 位（如
258.5而非258.47）
真正难处理的不是 @supports 是否识别，而是 fallback 是否能在所有目标环境（尤其是各种安卓 WebView）中稳定生效——它必须是静态、前置、格式无歧义的纯色声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
