supports ルール

ルール @supports は、ブラウザのサポート状況に基づいて要素のスタイルを指定します。 このルール内では、論理演算子 not, and, or を使用して条件を作成できます。

構文

css@supports 条件 {
  
}

例

もしあなたのブラウザが display プロパティの値 flex をサポートしている場合、 対応するテキストを持つ段落のみが表示され、そのフォントの色が青になる条件を設定してみましょう：

html<p class="yes">あなたのブラウザは display: flex をサポートしています。</p>
<p class="no">あなたのブラウザは display: flex をサポートしていません。</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

関連項目