Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

CSS-Bedingungsregeln

Das CSS-Bedingungsregeln-Modul definiert CSS-Medien- und Unterstützungsabfragen, die es Ihnen ermöglichen, Stile nur dann anzuwenden, wenn bestimmte Bedingungen erfüllt sind. Die in diesem Modul definierten Bedingungsregeln basieren auf Geräte-, Benutzeragenten- und Anzeigeerweiterungen. Mit Bedingungsregeln können Sie CSS-Stile basierend auf Abfragewerten oder Browser- und Gerätefunktionen unabhängig vom darzustellenden Dokument anvisieren.

Die ersten CSS-Bedingungsregeln waren Medientypen, die das beabsichtigte Zielmedium für die verknüpften Stile angaben, zum Beispiel 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 At-Regel festgelegt. Die Möglichkeit, CSS-Regeln bedingt anzuwenden, wurde seit den Implementierungen von CSS 2.1 und HTML 4.01, die sich auf wenige Medientypen beschränkten, erheblich erweitert.

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

Das CSS-Bedingungsregeln-Modul erweitert auch @media, um die Verschachtelung von At-Regeln zu ermöglichen, wobei das verwandte CSS Media Queries-Modul unbenutzte Medientypen entfernt und viele Medienfeatures und Bedingungen hinzufügt, die gezielt werden können.

Das CSS Container Queries-Modul definiert ähnliche Bedingungsregeln, jedoch basierend auf dem Elternelement eines Elements anstelle des Ansichtsfensters.

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

Referenz

Eigenschaften

At-Regeln und Deskriptoren

Das CSS-Bedingungsregeln-Modul führt auch die @else- und @when-At-Regeln ein. Derzeit unterstützt kein Browser diese Funktionen.

Funktionen

Das CSS-Bedingungsregeln-Modul führt auch eine media()-CSS-Funktion ein. Derzeit unterstützt kein Browser diese Funktion.

Datentypen

Schnittstellen

Begriffe und Glossardefinitionen

Leitfäden

Verwendung von CSS-Feature-Abfragen

Selektives Anwenden von CSS-Regeln nach Überprüfung des Browsers auf Unterstützung für die angegebenen Eigenschaften und Werte über Feature-Abfragen.

Verwendung von CSS-Media Queries

Einführung in Media Queries, ihre Syntax und die Operatoren und Medienmerkmale, die zur Erstellung von Media-Query-Ausdrücken verwendet werden.

Unterstützung älterer Browser: Feature-Abfragen

Wie man Feature-Abfragen verwendet, um CSS basierend auf dem Unterstützungslevel des Browsers für Web-Features auszurichten.

Browser-Feature-Erkennung: CSS @supports

Ein Blick auf die Erkennung von JavaScript- und CSS-Features, einschließlich CSS @supports.

Verwendung von Container-Scroll-State-Abfragen

Verwendung von Container-Scroll-State-Abfragen, mit einem Beispiel für jeden Typ.

Verwandte Konzepte

Spezifikationen

Specification
CSS Conditional Rules Module Level 5
CSS Conditional Rules Module Level 4
CSS Conditional Rules Module Level 3

Siehe auch