supports ルール
ルール @supports は、ブラウザのサポート状況に基づいて要素のスタイルを指定します。
このルール内では、論理演算子 not,
and, or を使用して条件を作成できます。
構文
@supports 条件 {
}
例
もしあなたのブラウザが display プロパティの値 flex をサポートしている場合、
対応するテキストを持つ段落のみが表示され、そのフォントの色が青になる条件を設定してみましょう：
<p class="yes">あなたのブラウザは display: flex をサポートしています。</p>
<p class="no">あなたのブラウザは display: flex をサポートしていません。</p>
@supports (display: flex) {
.no {
display: none;
}
p {
color: #467CBC;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
:
関連項目
-
CSSファイルをインポートするルール
@import -
メディアタイプに応じたスタイルを指定するルール
@media -
スタイルの優先順位を指定するルール
!important
