CSS @supports ルール

CSS @supports ルールを使用すると、ブラウザが特定の CSS プロパティと値の組み合わせをサポートしているかどうかに基づいて、スタイルを条件付きで適用できます。これは「フィーチャークエリ（Feature Queries）」と呼ばれ、モダンな CSS 機能を安全に導入するための非常に強力なツールです。

1. CSS @supports ルールとは

@supports ルールを使用することで、特定の CSS 機能が利用可能な場合にのみ特定の宣言を適用する「条件付き CSS」を実現できます。これにより、古いブラウザとの互換性を保ちながら、最新の CSS 機能を積極的に取り入れるプログレッシブ・エンハンスメントが可能になります。

1.1 基本的な構文

@supports の基本的な使い方は、プロパティと値のペアを括弧で囲んで指定することです。

@supports (property: value) {
  /* 指定したプロパティと値がサポートされている場合に適用されるスタイル */
}

1.2 具体的な使用例

以下の例では、ブラウザが display: grid をサポートしている場合にのみ、グリッドレイアウトに関連するスタイルを適用します。

@supports (display: grid) {
  div {
    display: grid;
  }
}

2. 論理演算子の活用

@supports ルールでは、not、and、or といった論理演算子を使用して、より複雑な条件を作成できます。

2.1 NOT 演算子

特定の機能がサポートされていない場合にスタイルを適用します。

/* display: grid がサポートされていない場合 */
@supports not (display: grid) {
  div {
    float: left; /* フォールバックとしてフロートを使用 */
  }
}

2.2 AND 演算子

複数の機能がすべてサポートされている場合にスタイルを適用します。

/* display: flex と共通の変数プロパティが両方サポートされている場合 */
@supports (display: flex) and (aspect-ratio: 1 / 1) {
  div {
    display: flex;
    aspect-ratio: 1 / 1;
  }
}

2.3 OR 演算子

指定した機能のうち、少なくとも1つがサポートされている場合にスタイルを適用します。

/* 接頭辞付きの古いプロパティか、標準プロパティのどちらかがサポートされている場合 */
@supports (display: -webkit-flex) or (display: flex) {
  div {
    display: flex;
  }
}

3. セレクタのサポート確認 (@supports selector)

CSS の新しいセレクタ（例: :has() や :is()）が利用可能かどうかをチェックすることも可能です。この場合は selector() 関数を使用します。

/* :has() セレクタがサポートされている場合 */
@supports selector(:has(p)) {
  div:has(p) {
    border: 2px solid blue;
  }
}

4. プログレッシブ・エンハンスメントにおける重要性

@supports を利用する最大のメリットは、JavaScript による判定（Modernizr など）に頼らず、CSS のみで環境に応じた最適なレンダリングを選択できる点にあります。

一般的には、まずすべてのブラウザで動作する基本的なスタイルを記述し、その後に @supports を使って「もしこの機能が使えるなら、より高度なデザインにアップグレードする」というアプローチをとります。

4.1 実装例

/* デフォルト（古いブラウザ向け） */
.container {
  display: block;
}

/* フィーチャークエリによる強化 */
@supports (display: flex) {
  .container {
    display: flex;
    justify-content: space-between;
  }
}

5. CSS 条件付きルール一覧

@supports ルールは、現在ほとんどすべてのモダンブラウザでサポートされています。新しい CSS プロパティを使用する際に、「まだ一部のユーザーが対応していないから」と導入を諦めるのではなく、このルールを活用して安全なフォールバックを構築することが、プロフェッショナルなフロントエンド開発における推奨されるアプローチです。