CSSの@supportsとは？わかりやすく解説します

2025年10月4日

Web制作をしていると、「このCSSプロパティ、古いブラウザでも動くのかな？」と気になることがあります。

そんな時に便利なのが、@supportsという機能です。

この記事では、CSS初心者でも理解できるように、@supportsの使い方やnotの活用例をわかりやすく解説します。

さぽーつ？解説おねがいしゃす。

@supportsとは？

@supportsは、特定のCSSプロパティや値がブラウザでサポートされているかどうかを判定できる条件付きルールです。
サポートされていれば中のCSSが有効になり、サポートされていなければ無視されます。

たとえば、次のように書きます。

CSS

@supports (display: grid) {
  .container {
    display: grid;
  }
}

CSS

この例では、「display: grid」がブラウザでサポートされている場合のみ、.containerにdisplay: grid;が適用されます。
つまり、機能検出（Feature Query）のための構文です。

@supportsの基本的な使い方

書き方の基本構文は以下のとおりです。

CSS

@supports (プロパティ: 値) {
  /* サポートされている場合のCSS */
}

CSS

複数条件を組み合わせることも可能です。

CSS

@supports (display: grid) and (aspect-ratio: 1/1) {
  /* 両方の機能がサポートされている場合 */
}

@supports (display: grid) or (display: flex) {
  /* どちらかがサポートされている場合 */
}

CSS

このようにandやorを使えば、柔軟に条件分岐を行えます。
CSS初心者でも、if文のような感覚で理解しやすいはずです。

notを使って「サポートされていない」場合のスタイルを指定する

指定した条件”以外“を指定することもできるの？

@supportsでは、notを使って「サポートされていない場合」を指定することもできます。

CSS

@supports not (display: grid) {
  .container {
    float: left;
  }
}

CSS

この例では、gridが使えないブラウザでは代わりにfloatレイアウトを適用します。
つまりこれによって、古いブラウザには古いブラウザ用の対応できるということです。
notは、サポート外環境でのフォールバック（代替デザインのこと）を行う際に非常に便利です。

ブラウザのサポート状況

現在、主要なブラウザ（Chrome、Firefox、Safari、Edge）では

基本的に@supportsが広くサポートされています。

一方で、古いIE（Internet Explorer）は@supportsをサポートしていません。

まぁIEはほとんど使わないか。

具体的な活用例

実際のサイト制作で使うと、こんな感じです。

CSS

@supports (backdrop-filter: blur(10px)) {
  .header {
    backdrop-filter: blur(10px);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .header {
    background-color: rgba(255, 255, 255, 0.9);
  }
}