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

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

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

@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 selector() 関数には未対応
iOS Safari selector() 関数には未対応
Android Chrome

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

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

@-規則
メディアクエリ
セレクタ
疑似要素
疑似クラス
CSS関数
背景

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

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

IE11
Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome

このページの上部へ