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

“CSS Conditional Rules Module”

記事Jul. 30th,2021
CSS3で特定の条件に応じてスタイルを適用するための条件付グループ・ルールの仕様を定義した“CSS Conditional Rules Module”について。

仕様書の概要

概要

CSS Conditional Rules Module”はスタイルシートの一部を文書を処理するデバイスの能力やスタイルが適用される文書などの特定の条件に応じてに適用させる条件付グループ・ルールについて定義している仕様書です。

@import”ルールやHTMLのlink”要素はスタイルシート全体を特定の条件で適用するかどうかを指定することができますが、条件付グループ・ルールを使用することでスタイルシートの一部だけを指定した条件に応じて適用させることができます。

仕様書

定義されている@ルール

用語など

条件付グループ・ルール

条件付グループ・ルール(Conditional Group Rules)”は@ルールの一種で、他のCSSルールに適用される条件を結びつけます。

条件付グループ・ルールにはメディア・クエリで適用対象となるメディアやデバイスを限定する@media”ルールフィーチャー・クエリで適用対象を特定のCSSの機能に対応しているメディアやデバイスに限定する@supports”ルールがあります。

条件付グループ・ルールは“{”と“}”で囲まれたブロックの中にスタイルシートを内包します。メディア・クエリフィーチャー・クエリによってメディアやデバイスが指定された条件を満たしているか、“真(True)”か“偽(False)”かが検証され、条件付グループ・ルールに内包されたCSSルールは“真”である場合にだけ適用され、“偽”である場合には適用されません。ユーザー・エージェントはユーザーの閲覧環境に変化があった場合にはこれらのクエリを再度検証して真偽を決定し、既に表示されているウェブページでも後で条件を満たすようになったり、満たさなくなったりした場合でもスタイルシートを切り替えることができます。

条件付グループ・ルールの外にあるCSSルールは他に@import”ルールlink”要素で条件が指定されていなければ無条件で適用されます。

条件付グループ・ルールにはスタイルシートの最上位の階層で通常使用することが認められているルールは他に制約がなければすべて含むことができます。条件付グループ・ルールの中に他の条件付グループ・ルールを入れ子にすることもでき、その場合は内側の条件付グループ・ルールに内包されたCSSルールは外側と内側の両方の条件付グループ・ルールで指定された条件を満たさなければ適用されません。

@charset”ルール@import”ルール@namespace”ルールのような他の@ルールよりも前に配置しなければならないルールは中に含むことができません。配置できないルールが>条件付グループ・ルールに含まれた場合は無視されます。

フィーチャー・クエリ

“フィーチャー・クエリ”とは?

フィーチャー・クエリ(Feature Queries)”もしくは“サポーツ・クエリ(Supports Queries)”はメディアやデバイスが特定のCSSの機能に対応しているかどうかを検証する仕組みです。フィーチャー・クエリは論理式であり、検証した機能に対応していれば“真(True)”、対応していなければ“偽(False)”を返します。

フィーチャー・クエリは@supports”ルールの他に@import”ルールでも使用することができます。

サンプルコード

/* 縦書きに対応している時に適用されるスタイル。 */
@import url("css-vertical.css") supports(writing-mode: vertical-rl) ;

@supports (display: flex) {
div {
/* フレックス・レイアウトに対応している時に適用されるスタイル。 */
display: flex;
}
}

フィーチャー・クエリの書き方

フィーチャー・クエリの最小単位は“サポーツ・フィーチャー(Supports Feature)”です。1個以上のサポーツ・フィーチャーを演算子を組み合わせたものを“サポーツ・コンディション(Supports Condition)”と言います。

これはメディア・クエリの“メディア・フィーチャー”と“メディア・コンディション”とよく似ています。

サポーツ・フィーチャー

サポーツ・フィーチャーはメディア・クエリの“メディア・フィーチャー”に似ていますが、括弧(“(”と“)”)の中身はフィーチャー・クエリで検証する宣言を記述します。括弧の中にはCSSのプロパティ名とその値を一組だけ記述することができます。

@supports (〚プロパティ名〛:〚値〛) {
...
}
サポーツ・フィーチャーを指定したフィーチャー・クエリの例
@supports (text-overflow: fade) {
/* あふれるテキストをフェードアウトできる場合に適用されるスタイル。 */
}

@supports (color: hwb(0,0%,0%)) {
/* “hwb()”関数が使用できる場合に適用されるスタイル。 */
}

サポーツ・コンディション

サポーツ・フィーチャー、もしくは“selector()”関数を演算子で組み合わせることで、サポーツ・コンディションとすることができ、より細かく条件を指定できます。

演算子の使用方法はメディア・クエリの“メディア・フィーチャー”を組み合わせて“メディア・コンディション”にする場合と同様です。

演算子 説明
and いずれのサポーツ・フィーチャーも“真”であれば“真”
or いずれかのサポーツ・フィーチャーが“真”であれば“真”
not サポーツ・フィーチャーを否定
@supports 〚サポーツ・フィーチャー〛 and 〚サポーツ・フィーチャー〛 {
...
}

@supports 〚サポーツ・フィーチャー〛 or 〚サポーツ・フィーチャー〛 {
...
}

@supports not 〚サポーツ・フィーチャー〛 {
...
}

演算子は複数使用することができ、3個以上のサポーツ・フィーチャーを組み合わせてサポーツ・コンディションにすることもできますが、異なる演算子をサポーツ・コンディションの同じ階層(同じ括弧の中)に混在させることはできず、括弧でグループ化して関係性を明確にして記述しなければなりません。

サポーツ・コンディションを指定したフィーチャー・クエリの例
@supports not (display: flex) {
/* フレックス・レイアウトが使用できない場合に適用されるスタイル。 */
}

@supports (display: flex) and (display: grid) {
/*
・フレックス・レイアウト
・グリッド・レイアウト
のどちらにも対応している場合に適用されるスタイル。
*/
}

@supports (not (display: flex)) and (display: grid) {
/* フレックス・レイアウトには対応しておらず、グリッド・レイアウトには対応している場合に適用されるスタイル。
*/
}

selector()”関数CSS Conditional Rules Module Level 4で追加

サポーツ・フィーチャーの代わりに“selector()”関数を使用することでメディアやデバイスが引数として記述した複合セレクタに対応しているかどうかを検証することができます。

@supports selector(〚セレクタ〛) {
...
}

定義されているCSSルール

@ルール

@ルール 説明
@media スタイルが適用されるメディアやデバイスを限定する
@supports スタイルが適用される対象を特定の機能に対応しているメディアやデバイスに限定する
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク