CSS Reference

@supports

CSS のサポート状況に応じてスタイルを指定する

@supports 規則は指定した CSS の機能に対して、ブラウザが対応（サポート）しているか、あるいは対応していないか、という条件を設定した上で、スタイルを適用することができます。

CSS Conditional Rules Module Level 4 では、selector() 関数が追加されました。これにより、セレクタの対応状況に応じてスタイルを指定することも可能になりました。

@supportsのサンプルソース

/*
段組み（マルチカラム）レイアウトに対応した環境にのみスタイルを指定したい場合の例
column-count: auto の指定が有効な場合に @supports 規則内のスタイルが適用されます。
*/

@supports (column-count: auto) {
    div {
        column-count: 3;
        column-width: 36em;
        column-gap: 2em;
    }
}
/*
@media 規則と入れ子にして記述することもできます。
*/

@supports (column-count: auto) {
    @media (min-width: 1600px) {
        div {
            column-count: 3;
            column-width: 36em;
            column-gap: 2em;
        }
    }
}
/*
not, and, or を使用してより複雑な指定も可能です。
*/

@supports not (display: flex) {
   ...略...
}

@supports (display: flex) and (not (display: inline-grid)) {
   ...略...
}

@supports (transition-property: color) or 
((animation-name: foo) and (transform: rotate(10deg))) {
   ...略...
}
/*
カスタムプロパティを、対応するブラウザ環境でのみ有効にするといった使い方もできます。
*/

@supports (--main-color: red) {
    :root {
        --main-color: red;
    }
    .sample {
        background-color: var(--main-color);
    }
}
/*
selector() 関数を使用することでセレクタの対応状況に応じた指定も可能です。
*/

@supports selector(:not(:defined)) {
   ...略...
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○+15.4
iOS Safari ○+15.4
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome