At-Regel

Was ist die At-Regel?

Die At-Regel ist Bestandteil der Spezifikation von CSS (Cascading Style Sheets). At-Regeln sind Bestandteile vieler CSS-Dokumente, die eine Menge von CSS-Regeln einkapseln und auf etwas Spezifisches anwenden.

Sie können zum Importieren anderer CSS-Dateien, zum Anwenden von CSS auf ein bestimmtes Medium oder zum Einbetten von ungewöhnlichen Schriftarten verwendet werden. Jede At-Regel beginnt mit einem Apétail oder einem “At-Zeichen” – Daher diese Bezeichnung.

Eine At-Regel ist eine CSS-Anweisung, die die CSS anweist, sich in bestimmter Art und Weise zu verhalten. Sie beginnen mit einem at-Zeichen, gefolgt von einem Bezeichner und enthalten alles bis zum nächsten Semikolon oder dem nächsten CSS-Block, je nachdem, was zuerst eintritt.

Konkret sieht die allgemeine Struktur einer At-Regel wie folgt aus:
@IDENTIFIER (REGEL);

Die folgende At-Regel weist den Browser an, den Zeichensatz UTF-8 zu verwenden:
@charset “utf-8”;

Beispiele:

Es gibt eine Anzahl verschiedener solcher Regeln, jede At-Regel ist dabei durch ihren Bezeichner gekennzeichnet, jeweils mit einer anderen Syntax:

@charset – Definiert den vom Stylesheet verwendeten Zeichensatz.
@import – Weist die CSS-Engine an, ein externes Stylesheet einzubinden. Diese Regel wird ganz oben in der Datei eingefügt und weist das Stylesheet an, eine externe CSS–Datei anzufordern und so einzubinden, als ob der Inhalt dieser Datei genau dort wäre, wo sich diese Zeile befindet.
@namespace – Weist die CSS-Engine an, dass ihr gesamter Inhalt als Präfix mit einem XML-Namespace betrachtet werden muss.

Verschachtelte At-Regeln

Verschachtelte At-Regeln sind Teilmengen verschachtelter Anweisungen, die sowohl als Anweisung für ein Stylesheet als auch innerhalb von bedingten Gruppenregeln verwendet werden können: Verschachtelte Regeln enthalten dann eine Teilmenge zusätzlicher Anweisungen, von denen einige möglicherweise von einer bestimmten Situation abhängig sind.

@media – Eine bedingte Gruppenregel, deren Inhalt Anwendung findet, wenn das Gerät die Kriterien der durch eine Medienabfrage definierten Bedingung erfüllt.
@supports – Eine bedingte At-Regel, deren Inhalt angewendet wird, wenn der Browser die angegebenen Konditionen erfüllt. Diese Gruppenregel prüft, ob ein Browser ein Feature unterstützt, und wendet dann die Stile für diese Elemente an, wenn die Bedingung erfüllt ist.
@document – Eine bedingte Gruppenregel, deren enthaltene Anweisungen in Kraft treten, wenn das Dokument, in dem das Stylesheet angewendet wird, die Kriterien der angegebenen Bedingung erfüllt.
@page – Beschreibt Layoutänderungen, die beim Drucken des Dokuments angewendet werden.
@ font-face – Beschreibt eine externe Schriftart, die heruntergeladen werden soll.
@keyframes – Beschreibt den Aspekt von Zwischenschritten in einer CSS-Animationssequenz.
@viewport – Beschreibt die Adaption des Ansichtsfensters für kleine Bildschirmgeräte.

At-Regel als bedingte Gruppenregeln

Ähnlich wie bei den Werten von Eigenschaften hat jede Regel eine andere Syntax. Dennoch können mehrere von ihnen einer speziellen Kategorie namens bedingte Gruppenregeln zugeordnet werden. Diese Anweisungen haben eine gemeinsame Syntax und jede von ihnen kann verschachtelte Anweisungen enthalten – entweder Regelsätze oder verschachtelte at-Regeln.

Darüber hinaus folgen sie alle einer gemeinsamen Semantik – sie sind alle mit einer Bedingung verbunden, die zu einem beliebigen Zeitpunkt entweder wahr oder falsch ist. Wenn die Bedingung als wahr ausgewertet wird, werden alle Anweisungen innerhalb der Gruppe angewendet. Die folgenden bedingten Gruppenregeln sind in CSS Conditionals Level 3 definiert: