このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

@supports”ルールCSS Conditional Rules Module Level 3で追加

記事Jul. 28th,2021
スタイルシートの適用対象を特定のCSSの機能に対応しているメディアやデバイスに限定する“@supports”ルール
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

@supports”ルール

@supports”ルールはスタイル・ルールなどのCSSルールの適用対象をメディアやデバイスが特定のプロパティと値、セレクタに対応しているかによってに限定する条件付グループ・ルールです。

@supports”ルールはスタイルシートの一部を内包することができ、“フィーチャー・クエリ”で指定した特定の条件でだけ適用されるように設定することができます。

“@supports”ルール

CSSの仕様書には年々新しいプロパティや値が追加されていますが、新しいプロパティや値に対応していないユーザー・エージェントはこれらを含む宣言を無効なものとして扱うため、表示が崩れてしまうリスクがあります。“@supports”ルールを使用して新しい機能に対応しているデバイス向けのメディアやデバイスとそうでないスタイルを分けることによって最新のCSSの機能を使用しながらも対応していないユーザー・エージェントでも正常に文書を表示することができます。

@supports”ルールの構文

@supports”ルールは“@supports”に続く、“フィーチャー・クエリ”とスタイルシート(<stylesheet>)を含む“{”と“}”で囲まれたブロックからなります。

@supports 〚フィーチャー・クエリ〛 {
〚スタイルシート〛
}

@supports”ルールにはスタイルシートの最上位の階層で通常使用することが認められているルールはほとんど含むことができますが、@charset”ルール@import”ルール@namespace”ルールのような他の@ルールよりも前に配置しなければならないルールは中に含むことができません。

@supports”ルールの外側にあるルールはすべてのデバイスに適用されます。また、“@supports”ルールの中に“@supports”ルールを配置した場合は内側の“@supports”ルールに内包されたルールは両方の“@supports”ルールの条件をどちらも満たした場合にだけ適用されます。

使用例

p.sample {
padding: 10px;
border-radius: 10px;
font-size: 1.5em;
}

@supports (writing-mode: vertical-rl) {
p.sample {
text-decoration-line: underline;
}
}

@supports (display: flex) and (text-overflow: fade) {
p.sample {
background-color: #00a497; /**/
text-decoration-style: dotted;
}
}

@supports (display: flex) and (not (text-overflow: fade)) {
p.sample {
background-color: #e198b4; /**/
text-decoration-style: wavy;
}
}

@supports (not (display: flex)) and (text-overflow: fade) {
p.sample {
background-color: #fabf14; /**/
text-decoration-style: dashed;
}
}
<p class="sample">
猫は、上のかぎり黒くて、ことはみな白き。
</p>

猫は、上のかぎり黒くて、ことはみな白き。

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
@supports
定義なし

定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク