color-mix() 非対応ブラウザ向けフォールバック戦略

color-mix() を本番に出荷する

color-mix() のブラウザサポートは 2025 年時点で優秀 (グローバル トラフィックの 95%+) ですが、古い Safari や組み込み WebView ユーザー の一部はこれを利用できません。安全な 2 つのパターン：

1. 静的フォールバックを先に

.button {
  background: #5a3899;                                    /* fallback */
  background: color-mix(in oklch, red, blue);             /* modern  */
}

ブラウザは宣言を順番に解析します。古いエンジンは静的 hex を受け入れ、 下にある未知の関数を無視します。モダンエンジンは両方を受け入れ、 カスケードで後者を採用します。JS 不要、@supports ブロックも不要です。

2. レイアウトを分岐するための @supports

フォールバックが構造的に異なる場合 (例：color-mix 非対応時は要素を 完全に隠したい)：

@supports (background: color-mix(in oklch, red, blue)) {
  .button { background: color-mix(in oklch, var(--brand), black 12%); }
}

@supports not (background: color-mix(in oklch, red, blue)) {
  .button { background: var(--brand-700); }
}

3. カスタムプロパティ内のフォールバック

カスタムプロパティでパレットを構築する場合、フォールバックを プロパティの初期値として設定します：

@property --brand-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #1d4ed8;     /* 手動調整したフォールバック */
}

:root {
  --brand-hover: color-mix(in oklch, var(--brand), black 18%);
}

color-mix サポート無しのブラウザは登録された initial-value に フォールバックします。

必要ならランタイム検出

CSS.supports("color", "color-mix(in oklch, red, blue)") が真偽値を 返します。控えめに使用してください — 宣言的フォールバックは、機能検出 された JS 分岐よりほぼ常にシンプルです。