At-Regeln beginnen mit einem Klammeraffen und steuern, unter welchen Bedingungen Regeln gelten oder was zusätzlich geladen wird.
- At-Regeln (@media, @import, @font-face)
CSS-Anweisungen, die mit einem Klammeraffen beginnen und entweder einen Block unter eine Bedingung stellen oder etwas einbinden.
Beispiel: „Eine At-Regel steht auf der obersten Ebene eines Stylesheets.“
Die wichtigsten
@media stellt Regeln unter eine Bedingung, meist die Breite des Fensters. @font-face bindet eine Schriftdatei ein. @import lädt ein weiteres Stylesheet, was für die Ladezeit ungünstig ist, weil die Dateien nacheinander geholt werden. @supports prüft, ob der Browser eine Eigenschaft kennt.
@media (min-width: 768px) {
.spalten { display: grid; }
}Neuere Vertreter
@container stellt Regeln unter die Breite des umgebenden Bereichs statt des Fensters, @layer ordnet Regeln in Schichten und gibt der Kaskade eine zusätzliche Ebene. Beide lösen Probleme, für die es lange nur Umwege gab.