Jul. 28th,2021
“@supports”ルール
“@supports”ルールはスタイル・ルールなどのCSSルールの適用対象をメディアやデバイスが特定のプロパティと値、セレクタに対応しているかによってに限定する条件付グループ・ルールです。
“@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>
猫は、上のかぎり黒くて、ことはみな白き。
