CSS/@supports

@supports

@supportsは、特定のCSSプロパティや値がブラウザでサポートされているかどうかを条件付きでチェックし、それに基づいてスタイルを適用するためのCSS at-ruleです。これにより、異なるブラウザ環境や機能対応状況に応じた柔軟なスタイリングが可能になります。

構文

基本的な@supportsの構文は以下の通りです：

@supports (条件) {
  /* サポートされている場合に適用するスタイル */
}

複数条件を指定することも可能です：

@supports (条件1) and (条件2) {
  /* 両方の条件を満たす場合のスタイル */
}

@supports (条件1) or (条件2) {
  /* どちらかの条件を満たす場合のスタイル */
}

@supports not (条件) {
  /* 条件を満たさない場合のスタイル */
}

使用例

単一条件のチェック

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

この例では、display: gridがサポートされている場合のみ、gridレイアウトが適用されます。

複数条件のチェック

@supports (display: grid) and (gap: 10px) {
  .container {
    display: grid;
    grid-gap: 10px;
  }
}

この例では、display: gridとgap: 10pxの両方がサポートされている場合にスタイルが適用されます。

非サポート時のスタイル適用

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

ここでは、gridがサポートされていない場合に代替のflexboxレイアウトを適用しています。

特徴

条件付きスタイリング: CSS機能の対応状況に応じて異なるスタイルを適用可能。
フォールバック対応: サポートされない場合のスタイルを明示的に指定できる。
複数条件の組み合わせ: and、or、not演算子を使用して高度な条件指定が可能。

注意事項

プロパティの正確な指定: 存在しないプロパティや値を指定すると条件が常に偽となります。
ブラウザ間の差異: 古いブラウザでは@supportsがサポートされていない場合があります。

ブラウザ対応状況
ブラウザ	サポート
Google Chrome	完全対応
Microsoft Edge	完全対応
Firefox	完全対応
Safari	完全対応

最新の対応状況はCan I Useを確認してください。