At Regel
Was ist eine At-Regel?
Eine At-Regel ist eine CSS-Anweisung, die mit dem Zeichen @ beginnt und das Verhalten eines Stylesheets steuert. Sie definiert beispielsweise responsive Layouts, Schriftarten, Animationen oder externe CSS-Dateien. Je nach Regel folgt auf den Namen eine einzelne Anweisung oder ein Block mit weiteren CSS-Regeln.
Eine At-Regel erweitert CSS um Anweisungen, die über die Gestaltung einzelner HTML-Elemente hinausgehen. Der englische Fachbegriff lautet At-Rule. Typische Beispiele sind @media für responsive Designs, @font-face für Webfonts und @keyframes für Animationen.
Aufbau einer At-Regel
Jede At-Regel beginnt mit einem @-Zeichen, unmittelbar gefolgt vom Namen der Regel. Abhängig vom Typ endet die Anweisung mit einem Semikolon oder enthält einen Block in geschweiften Klammern. Innerhalb eines Blocks können Deklarationen, CSS-Regeln oder weitere At-Regeln stehen.
Eine einfache Anweisung ohne eigenen Regelblock ist beispielsweise @import url('layout.css');. Eine gruppierende Regel wie @media (max-width: 768px) { ... } enthält dagegen CSS, das nur unter der angegebenen Bedingung angewendet wird.
@regel Bedingung; oder @regel Bedingung { Inhalt }. Welche Inhalte zulässig sind, hängt von der jeweiligen Regel und der CSS-Spezifikation ab. Wichtige CSS-At-Regeln
Browser unterstützen verschiedene At-Regeln für unterschiedliche Aufgaben. Für Websites, Onlineshops und Webanwendungen sind vor allem Regeln relevant, die das responsive Verhalten, Schriftarten, Animationen und die technische Organisation des CSS beeinflussen.
| At-Regel | Aufgabe | Typischer Einsatz |
|---|---|---|
@media | Aktiviert CSS abhängig von Geräteeigenschaften | Responsive Layouts für Smartphones, Tablets und Desktops |
@font-face | Bindet eigene Schriftdateien ein | Lokale oder extern bereitgestellte Webfonts |
@supports | Prüft die Unterstützung einer CSS-Funktion | Alternative Gestaltung für unterschiedliche Browser |
@keyframes | Definiert einzelne Phasen einer Animation | Bewegungen, Übergänge und Ladeanimationen |
@import | Lädt ein zusätzliches Stylesheet | Aufteilung von CSS auf mehrere Dateien |
@page | Steuert die Darstellung beim Drucken | Druckansichten, Seitenränder und Seitenformate |
@layer | Ordnet CSS-Regeln in Kaskadenebenen | Kontrolle der Priorität umfangreicher Stylesheets |
Responsive Gestaltung mit @media
Die At-Regel @media wendet CSS nur an, wenn eine definierte Medienabfrage erfüllt ist. Eine Regel mit max-width: 768px kann beispielsweise Navigation, Schriftgrößen und Spaltenaufteilung für schmale Bildschirme anpassen. Das unterstützt eine konsistente mobile Darstellung, ohne separate HTML-Seiten bereitzustellen.
Schriftarten mit @font-face
Mit @font-face lassen sich Schriftdateien unter einem selbst festgelegten Namen registrieren. Anschließend kann die Schrift über die Eigenschaft font-family verwendet werden. Dateiformat, Dateigröße, Ladeverhalten und Schriftschnitte müssen sorgfältig konfiguriert werden, weil Webfonts die Ladezeit und die visuelle Stabilität einer Seite beeinflussen können.
Funktionsprüfung mit @supports
Die At-Regel @supports prüft, ob ein Browser eine bestimmte CSS-Eigenschaft mit einem bestimmten Wert versteht. Entwickler können dadurch moderne Funktionen einsetzen und zugleich eine einfachere Alternative für Browser definieren, die diese Funktion nicht unterstützen.
Relevanz für technisches SEO
At-Regeln sind kein direkter Ranking-Faktor. Ihre Umsetzung beeinflusst jedoch technische und nutzerbezogene Eigenschaften einer Website. Dazu zählen mobile Bedienbarkeit, Ladezeit, Layout-Stabilität und die Darstellung wichtiger Inhalte. Diese Faktoren sind Gegenstand der Onpage-Optimierung und können die organische Performance mittelbar beeinflussen.
Besondere Aufmerksamkeit verdient @import. Werden mehrere CSS-Dateien nacheinander über diese Regel geladen, kann eine Abrufkette entstehen. Häufig ist es günstiger, zentrale Stylesheets direkt im HTML einzubinden oder im Build-Prozess zusammenzuführen. Die passende Lösung hängt von Architektur, Caching und Dateigröße ab.
Webfonts erfordern ebenfalls eine technische Prüfung. Fehlende Schriftschnitte, große Dateien oder eine unpassende Ladeoption können dazu führen, dass Text verspätet erscheint oder sich das Layout während des Ladens verschiebt. Ein Ladezeiten-Check hilft dabei, auffällige Ressourcen und Verzögerungen zu identifizieren.
Prüfe die Ladezeit deiner Seite direkt im Browserbericht:
At-Regel und CSS-Regel im Vergleich
Der Unterschied zwischen einer At-Regel und einer gewöhnlichen CSS-Regel liegt in ihrem Zweck und Aufbau. Eine CSS-Regel wählt über einen Selektor bestimmte HTML-Elemente aus und weist ihnen Eigenschaften zu. Eine At-Regel steuert dagegen übergeordnete Bedingungen, Ressourcen oder Funktionen des Stylesheets.
| Merkmal | At-Regel | Gewöhnliche CSS-Regel |
|---|---|---|
| Beginn | @-Zeichen und Regelname | Selektor |
| Zweck | Steuerung von Bedingungen oder CSS-Funktionen | Gestaltung ausgewählter HTML-Elemente |
| Beispiel | @media (max-width: 768px) | .navigation { display: none; } |
| Inhalt | Anweisung, Deklarationen oder weitere Regeln | CSS-Deklarationen |
Eine Media Query ist ebenfalls nicht mit der gesamten At-Regel gleichzusetzen. Die Media Query beschreibt die Bedingung, etwa eine maximale Breite. @media ist die At-Regel, welche diese Bedingung mit einem Block aus CSS-Regeln verbindet.
Typische Fehler bei At-Regeln
Fehler entstehen häufig durch eine ungültige Position im Stylesheet, fehlende Semikolons, nicht geschlossene Klammern oder falsch formulierte Bedingungen. Manche Regeln dürfen nur an bestimmten Stellen stehen. @charset muss beispielsweise am Anfang einer CSS-Datei erscheinen, während Import-Anweisungen vor den meisten gewöhnlichen Stilregeln angeordnet werden müssen.
Eine saubere CSS-Struktur erleichtert Wartung und Fehlersuche. Wiederkehrende Breakpoints sollten konsistent definiert, nicht benötigte Importe entfernt und Animationen gezielt eingesetzt werden. Ein technischer Crawler kann ergänzend Probleme rund um Ressourcen, Ladezeiten und mobile Seitendarstellung aufdecken. Der Leitfaden zum SEO-Technik-Crawler erklärt den Ablauf solcher Prüfungen.
Wenn CSS-Struktur, mobile Darstellung oder Ladezeit eine umfassendere Analyse benötigen, kann ein unverbindlicher Potenzialcheck technische Prioritäten für deine Website einordnen.
Häufige Fragen zu At-Regeln
Woran erkenne ich eine At-Regel in CSS?
Eine At-Regel beginnt immer mit dem Zeichen @ und einem festgelegten Regelnamen. Beispiele sind @media, @font-face, @supports und @import.
Kann eine At-Regel weitere At-Regeln enthalten?
Bestimmte gruppierende At-Regeln dürfen verschachtelte Regeln enthalten. Ob eine Verschachtelung gültig ist, hängt von der jeweiligen Regel und der verwendeten CSS-Spezifikation ab.
Funktionieren alle At-Regeln in jedem Browser?
Die Browserunterstützung unterscheidet sich je nach At-Regel und Funktion. Unbekannte oder nicht unterstützte Regeln werden in der Regel ignoriert, weshalb die Unterstützung vor dem produktiven Einsatz geprüft werden sollte.
Kann ich mehrere @media-Regeln verwenden?
Ein Stylesheet kann mehrere @media-Regeln enthalten. Klare Breakpoints und konsistente Bedingungen verhindern dabei widersprüchliche oder unnötig komplexe mobile Layouts.
Ist @import für CSS empfehlenswert?
@import ist gültiges CSS, kann aber zusätzliche Abhängigkeiten und Abrufketten erzeugen. Für zentrale Stylesheets ist eine direkte Einbindung im HTML oder eine Zusammenführung im Build-Prozess häufig effizienter.
Beeinflussen At-Regeln das Google-Ranking?
At-Regeln sind kein eigenständiger Ranking-Faktor. Sie können jedoch Ladezeit, mobile Bedienbarkeit und Layout-Stabilität beeinflussen und dadurch mittelbar für technisches SEO relevant werden.
Sie haben noch Fragen?
