Eine @-Regel ist ein CSS Statement, das mit einem At-Zeichen beginnt, '@' (U+0040 COMMERCIAL AT), gefolgt von einem Bezeichner und das beim ersten Semikolon, ';' (U+003B SEMICOLON), außerhalb eines CSS Blocks endet oder am Ende des ersten Blocks.
Es gibt verschiedene @-Regeln, bestimmt durch deren Bezeichner, jede mit einer unterschiedlichen Syntax:
@charset— Definiert den Zeichensatz, der vom Stylesheet verwendet wird.@import— Teilt der CSS Engine mit, ein externes Stylesheet einzubinden.@namespace— Teilt der CSS Engine mit, dass sie alle Inhalte mit einem XML Namespace als Präfix betrachten soll.- Verschachtelte @-Regeln — Eine Untermenge an verschachtelten Statements, welche als Statement eines Stylesheets als auch innerhalb von bedingten Gruppenregeln verwendet werden können:
@media— Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Gerät die Kriterien der Bedingung erfüllt, die durch eine Media Query definiert wird.@supports— Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls der Browser die Kriterien der angegebenen Bedingung erfüllt.@document— Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Dokument, auf das das Stylesheet angewendet wird, die Kriterien der angegebenen Bedingung erfüllt. (verschoben nach Level 4 der CSS Spezifikation)@page— Beschreibt den Aspekt von Layoutänderungen, welche angewendet werden, wenn das Dokument gedruckt wird.@font-face— Beschreibt den Aspekt einer externen Schrift, die heruntergeladen werden soll.@keyframes— Beschreibt den Aspekt von Zwischenschritten in einer CSS Animationssequenz.@viewport— Beschreibt die Aspekte des Viewports auf Geräten mit kleinem Bildschirm. (aktuell im Arbeitsentwurfsstadium)
Bedingte Gruppenregeln
Ähnlich wie die Werte von Eigenschaften hat jede @-Regel eine andere Syntax. Trotzdem können einige von ihnen zu einer speziellen Kategorie zusammengefasst werden, bedingte Gruppenregeln genannt. Diese Statements teilen sich eine gemeinsame Syntax und jedes von ihnen kann verschachtelte Statements — entweder Regelsets oder verschachtelte @-Regeln — beinhalten. Darüber hinaus vermitteln sie alle die gleiche semantische Bedeutung — sie alle verbindet eine Art Bedingung, welche immer entweder true oder false ergibt. Falls die Bedingung true ergibt, werden alle Statements innerhalb der Gruppe angewandt.
Bedingte Gruppenregeln werden in CSS Conditionals Level 3 definiert und sind:
Da jede bedingte Gruppe auch verschachtelte Statements beinhalten kann, kann es eine undefinierte Anzahl von Verschachtelungen geben.
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| CSS Conditional Rules Module Level 3 | Anwärter Empfehlung | Ursprüngliche Definition |