CSS bedingte Regeln

Das Modul der CSS-bedingten Regeln definiert CSS-Medien- und Unterstützungsabfragen, die Ihnen ermöglichen, Stile zu definieren, die nur angewendet werden, wenn bestimmte Bedingungen erfüllt sind. Die in diesem Modul definierten bedingten Regeln basieren auf Geräte-, User-Agent- und Viewport-Fähigkeiten. Mit bedingten Regeln können Sie CSS-Stile basierend auf Abfragewerten oder Browser- und Gerätefunktionen anwenden, unabhängig vom gerenderten Dokument.

Die ersten CSS-bedingten Regeln waren Medientypen, die das beabsichtigte Zielmedium für die verknüpften Stile spezifizierten, zum Beispiel screen oder print. Diese wurden als Wert der media-Attribute der HTML-Elemente <link> und <style> oder als kommagetrennte Liste von Medientypen innerhalb einer @import-Anweisung oder Regel festgelegt. Die Fähigkeit, CSS-Regeln bedingt anzuwenden, wurde seit den CSS 2.1- und HTML 4.01-Implementierungen, die bedingte Abfragen auf wenige Medientypen beschränkten, erheblich erweitert.

CSS-bedingte Regeln umfassen jetzt Funktionsabfragen; die @supports-Regel ermöglicht es, CSS-Stile basierend auf den CSS-Fähigkeiten eines User-Agent zu zielen. Zusätzliche Bedingungen umfassen unterstützte Selektoren, Schriftformate und Schrifttechniken.

Das Modul der CSS-bedingten Regeln erweitert auch @media, um die Verschachtelung von Regeln zu ermöglichen, wobei das verwandte Modul der CSS-Medienabfragen ungenutzte Medientypen entfernt und viele Medienfunktionen und Bedingungen hinzufügt, die gezielt werden können.

Das Modul der CSS-Containerabfragen definiert ähnliche bedingte Regeln, die jedoch auf dem übergeordneten Element basieren statt auf dem Viewport.

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

Referenz

Regeln

Hinweis: Das Modul der CSS-bedingten Regeln führt zwei Regeln ein, die noch nicht implementiert wurden: @else und @when.

Funktionen

Hinweis: Das Modul der CSS-bedingten Regeln führt eine CSS-Funktion ein, die noch nicht implementiert wurde: media().

Daten Typen

Schnittstellen

Begriffe und Glossareinträge

Leitfäden

Verwendung von CSS-Funktionsabfragen

Selektive Anwendung von CSS-Regeln nach Überprüfung der Browserunterstützung für die angegebenen Eigenschaften und Werte mittels Funktionsabfragen.

Verwendung von CSS-Medienabfragen

Einführung in Medienabfragen, ihre Syntax und die Operatoren und Medienfunktionen, die zur Erstellung von Medienausdrücken verwendet werden.

Unterstützung älterer Browser: Funktionsabfragen

Anleitung zur Nutzung von Funktionsabfragen, um CSS basierend auf dem Niveau der Browserunterstützung für Web-Funktionen zu verwenden.

Browserfunktions-Erkennung: CSS @supports

Ein Blick auf Javascript und CSS-Funktionserkennung, einschließlich CSS @supports.

Verwandte Konzepte

Spezifikationen

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

Siehe auch