CSS 条件付きルール

CSS 条件付きルール (CSS conditional rules) モジュールは、CSS のメディアクエリーと機能クエリーを定義し、特定の条件が満たされた場合にのみ適用されるスタイルを定義できるようにします。このモジュールで定義される条件付きルールは、端末、ユーザーエージェント、ビューポートなどの能力に基づいています。条件付きルールを使用すると、レンダリングされる文書とは無関係に、クエリー値やブラウザーおよび端末の機能に基づいて、 CSS スタイルをターゲットに指定することができます。

最初の CSS 条件付きルールは、リンクされたスタイルの意図した送信先メディアを指定する メディア種別でした。例えば、 screen や print などです。これらは、HTML の <link> および <style> 要素の media 属性、あるいは @import 文またはアットルール内のメディア種別のカンマ区切りリストとして設定されていました。CSS ルールを条件付きで適用する機能は、条件付きクエリーをいくつかのメディア種別に制限していた CSS 2.1 および HTML 4.01 の実装から、大幅に拡張されました。

CSS 条件付きルールに機能クエリーが記載されるようになりました。アットルール @supports を使用すると、ユーザーエージェントの CSS 機能に基づいて CSS スタイルをターゲットに指定することができます。追加の条件としては、対応しているセレクター、フォント形式、フォント技術などが挙げられます。

CSS 条件付きルールモジュールは、 @media も拡張し、アットルールの入れ子が使用できるようにします。関連する CSS メディアクエリーモジュールは、使用されていないメディア種別を除去し、対象とすることができる多くのメディア機能や条件を追加します。

CSS コンテナークエリーモジュールは、同様の条件付きルールを定義しますが、ビューポートではなく要素の親に基づいて定義します。

一般化された条件ルール @when および連鎖条件ルール @else を追加して、実現可能なクエリーをさらに拡張する計画があります。この 2 つのアットルールは、まだ対応がありません。