@supports（feature queries）でブラウザーのサポート状況によってスタイルを切り替える

ブラウザがCSSの特定の機能をサポートしているか確認するために@supportsが提供されている。 @supportsはfeature queries（機能クエリー）と呼ばれ、プログレッシブエンハンスメントが実現できる。

プロパティごとにチェックする場合は、if(supports(...), ok, ng) のような対応も可能。

参考: CSSでif()が使えるようになる

単一のプロパティとその値をテストする場合

@supports (accent-color: red) {
  input[type="checkbox"] {
    accent-color: red;
  }
}

@supports not (accent-color: red) {
  input[type="checkbox"] {
    appearance: none;

    &:checked::before {
      background-color: red;
      color: white;
      content: "\2713";
    }
  }
}

複数のプロパティをテストする場合

@supports (display: grid) and (not (display: subgrid)) {
  /* ... */
}

@supports (display: grid) or (display: flex) {
  /* ... */
}

セレクターをテストする場合

@supports selector(col.selected||td) {
  /* ... */
}

デモ