CSSの新機能、導入は慎重に！@supportsでフォールバック付きのスマート実装術

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
近年、CSSは驚くほど進化していますよね。

backdrop-filter、:has()、subgrid、color-mix() など、表現力豊かなプロパティがどんどん登場しています。
でも、こんな心配…ありませんか？

そんなときに便利なのが CSS の機能検出文法
@supports（Feature Queries） です！

@supports とは？

CSS の @supports は、特定のプロパティや値がブラウザでサポートされているかどうかを条件分岐できる構文です。

JavaScript における feature detection に近く、
「この機能が使えるならこう表示、使えないならフォールバックを適用」といった柔軟な制御ができます。

基本構文と使い方

基本形

 @supports (プロパティ: 値) { /* 対応ブラウザ用のスタイル */ } 

例：backdrop-filter のフォールバック

.card {
  background-color: rgba(255, 255, 255, 0.8);
}
@supports (backdrop-filter: blur(10px)) {
  .card {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
  }
}

このように、非対応ブラウザには不透明な白背景、対応している場合はぼかし効果付きの半透明背景を使うといったことが可能です。

よく使うフォールバック付き実装例

1. display: grid → flex フォールバック

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

flexbox をベースにしておいて、対応ブラウザでは自動的に Grid に切り替える、鉄板のパターンです。

2. :has() を使った親要素スタイル切り替え

.card {
  border: 1px solid #ccc;
} /* 親が条件を持つ場合のハイライト（対応ブラウザのみ） */
@supports (selector(:has(*))) {
  .card:has(img) {
    border-color: #0d6efd;
  }
}

このように、対応しているなら強化表現、していなければ基本スタイルという「段階的なグレースアップ」が可能になります。

複数条件の書き方

@supports (display: grid) and (gap: 1rem) {
  /* 条件をすべて満たす場合のみ */
}
@supports not (backdrop-filter: blur(5px)) {
  /* 非対応ブラウザ向けの記述もできる */
}

論理演算子としては and / or / not を組み合わせられるので、細かい条件制御にも対応できます。

注意点とベストプラクティス

また、WordPressやテーマによっては @supports が minify 時に崩れる場合もあるので、ビルド環境との相性確認も大切です。

まとめ

CSS の進化は素晴らしいですが、ユーザー体験を犠牲にしては意味がありません。
@supports を使えば、古いブラウザへの配慮を保ちながらモダンな表現を導入できます。

CSS新機能を“安全に”導入したいなら、まずは @supports から始めてみましょう！