旧版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+）中启用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！