旧版Safari（16.3及更早）完全不支持oklab()，遇其整行静默丢弃，必须在同一选择器内前置安全色（如#4a6fa5）并用@supports (color: oklch(0% 0 0))检测，oklab()本身无法被可靠检测或降级。
因为旧版 Safari（16.3 及更早）根本不认识 oklab() 这个函数，遇到就整行丢弃，不报错、不降级、也不继承父级颜色——它直接当这行 CSS 不存在。
旧 Safari 对 oklab() 的解析行为是“静默跳过”
不是渲染异常，也不是 fallback 到上一个有效值；而是 CSS 引擎在语法解析阶段就判定 oklab(0.5 0.2 -0.1) 为非法函数，整条声明（比如 color: oklab(0.5 0.2 -0.1);）被彻底忽略。结果往往是文字变黑色、背景变透明、border 消失——全看浏览器默认值。
- 这个行为从 iOS 15.6、macOS Monterey（Safari 15.x–16.3）一直延续到 Safari 16.3
- Safari 16.4+ 才开始稳定支持
oklch()，但oklab()仍被多数版本视为未启用特性 - DevTools 的 computed 样式面板里压根不会显示该属性，连 warning 都没有
@supports (color: oklab(0 0 0)) 检测永远失败
这不是你写错了，而是所有当前主流浏览器（Chrome 117+、Firefox 121+、Safari 17.4+）对 oklab() 的支持都未进入稳定通道。@supports (color: oklab(0 0 0)) 在任何生产环境浏览器中都会返回 false，拿它做判断等于白写。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 唯一能实际检测的函数是
oklch()，且必须用@supports (color: oklch(0% 0 0)) -
oklab(0% 0 0)或oklab(0 0 0)写法均无效，浏览器不识别 - 别指望 PostCSS 插件转译
oklab()——postcss-oklab只处理oklch()字面量，不碰oklab()
fallback 必须写在同一选择器内，且顺序不能反
想让旧 Safari 显示颜色，只能靠“安全色前置”：同一行 CSS 里，先写一个它认得的值，再写 oklab()。浏览器按顺序解析，遇到不认识的就跳过，继续往后读。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
color: #4a6fa5; color: oklab(0.5 0.2 -0.1); - ❌ 错误：
@supports (color: oklab(0 0 0)) { .btn { color: oklab(0.5 0.2 -0.1); } }→ 整个块被跳过，旧 Safari 看不到任何颜色 - ❌ 错误：把 fallback 拆到另一个 class 或媒体查询里 → 旧 Safari 根本看不到第一行
- ⚠️ 注意：
oklab()参数必须严格是无单位小数，oklab(50% 20 -10)这类写法会直接失效
真正容易被忽略的是：你写的 oklab() 即使参数全对，在 Safari 16.3 及更早里也毫无意义——它不是兼容性问题，是功能缺失。想用 OKLab 空间，唯一可靠路径是 JS + colorjs.io 手动计算后注入 RGB，或只在明确支持的环境（Safari 17.5+、Chrome 112+）中启用。
