CSS-Bedingungsregeln

Das CSS Conditional Rules-Modul definiert CSS-Medien- und Supportabfragen und ermöglicht Ihnen die Definition von Stilen, die nur angewendet werden, wenn bestimmte Bedingungen erfüllt sind. Die in diesem Modul definierten Bedingungsregeln basieren auf Geräte-, User-Agent- und Viewport-Funktionen. Mit Bedingungsregeln können Sie CSS-Stile basierend auf Abfragewerten oder Browser- und Gerätefunktionen gezielt einsetzen, unabhängig vom aktuell gerenderten Dokument.

Die ersten CSS-Bedingungsregeln waren Medientypen, die das beabsichtigte Zielmedium für die verknüpften Stile festlegten, beispielsweise screen oder print. Diese wurden als Wert der media-Attribute der HTML-<link>- und <style>-Elemente oder als kommagetrennte Liste von Medientypen innerhalb einer @import-Anweisung oder Regel gesetzt. Die Möglichkeit, CSS-Regeln bedingt anzuwenden, hat sich seit den Implementierungen von CSS 2.1 und HTML 4.01, die bedingte Abfragen auf wenige Medientypen beschränkten, stark erweitert.

CSS-Bedingungsregeln beinhalten jetzt Feature-Abfragen; die @supports-Regel ermöglicht es, CSS-Stile basierend auf den CSS-Fähigkeiten eines User-Agents gezielt anzuwenden. Zusätzliche Bedingungen umfassen, welche Selektoren, Schriftformate und Schrifttechniken unterstützt werden.

Das CSS Conditional Rules-Modul erweitert ebenfalls @media, um das Verschachteln von Regeln zu ermöglichen. Das entsprechende CSS Media Queries-Modul entfernt ungenutzte Medientypen und fügt viele Medienfunktionen und Bedingungen hinzu, die gezielt angesprochen werden können.

Das CSS-Container-Abfragen-Modul definiert ähnliche Bedingungsregeln, jedoch basierend auf dem übergeordneten Element anstelle des Viewports.

Es gibt Pläne, mögliche Abfragen weiter zu erweitern, indem die generalisierte Bedingungsregel @when und die verkettete Bedingungsregel @else hinzugefügt werden. Diese beiden Regeln werden derzeit nicht unterstützt.