怎么在CSS中安全回退不支持OKLCH的旧版浏览器-css教程-PHP中文网

fallback颜色必须写在@supports块外部且上方，即先声明background-color: #2563eb;，再写@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.28 258.5); }；检测语法必须严格为(color: oklch(0% 0 0))，l带%，c为无单位小数，h无单位，不可加deg或逗号，alpha须用/分隔；禁用@supports not及嵌套写法，旧浏览器会静默跳过错误声明。

怎么在css中安全回退不支持oklch的旧版浏览器

fallback颜色必须写在@supports块外部且上方

浏览器按顺序解析CSS，遇到不支持的语法就跳过整行，不会报错也不会继续找下一条。所以background-color: #2563eb;这行必须出现在@supports块之前，否则旧浏览器可能连降级色都看不到。

常见错误是把@supports块写在前面，比如：

button {
  @supports (color: oklch(0% 0 0)) {
    background-color: oklch(60% 0.28 258.5);
  }
  background-color: #2563eb;
}

这种写法在部分旧版Chromium中会导致background-color: #2563eb;被忽略——它不是无效声明，但因位置靠后、被解析器跳过而失效。

✅ 正确顺序：先写普通色，再写@supports块（独立规则）
❌ 禁止嵌套：@supports不能写在选择器内部
⚠️ 注意空格：@supports (color: oklch(0% 0 0))括号内不能多空格，某些安卓WebView会因此判定为无效语法

@supports检测必须用`(color: oklch(0% 0 0))`且参数单位严格

这不是随便凑的占位符，而是唯一被Chrome 112+、Firefox 121+、Safari 17.4+一致识别的最小合法值。漏一个%、多一个deg、或把0写成0.0，检测就会失败。

这些写法全错：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@supports (color: oklch(0 0 0)) —— L缺%，Safari 16.x返回false
@supports (color: oklch(0% 0.0 0.0)) —— C/H用小数但没单位，Chrome 112–115部分版本拒识
@supports (color: oklch(0% 0 0deg)) —— deg在Safari 16.4–17.3中触发解析失败
@supports not (color: oklch(0% 0 0)) —— 某些安卓WebView直接崩溃整块CSS

只留这一种安全写法：@supports (color: oklch(0% 0 0))

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)