W3 Watch Reference

/*
段組み（マルチカラム）レイアウトに対応した環境にのみスタイルを指定したい場合の例
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)) {
   ...略...
}