Die at-rule ist eine Anweisung, die CSS Anweisungen zur Ausführung gibt oder wie es sich verhalten soll. Jede Anweisung beginnt mit einem @, gefolgt direkt von einem von mehreren verfügbaren Schlüsselwörtern, die als Identifikator dafür dienen, was CSS tun soll. Dies ist die gängige Syntax, obwohl jede at-rule eine Variation davon ist.
Reguläre Regeln
Reguläre Regeln folgen einer regulären Syntax
@[KEYWORD] (RULE);@charset
Diese Regel definiert den Zeichensatz, der vom Browser verwendet wird. Sie ist praktisch, wenn das Stylesheet Nicht-ASCII-Zeichen enthält (z. B. UTF-8). Beachten Sie, dass ein Zeichensatz, der im HTTP-Header platziert ist, jede @charset-Regel überschreibt.
@charset "UTF-8";@import
Diese Regel wird ganz am Anfang der Datei eingefügt und weist das Stylesheet an, eine externe CSS-Datei anzufordern und einzubinden, als ob der Inhalt dieser Datei genau dort wäre, wo diese Zeile steht.
@import 'global.css';Angesichts der Popularität von CSS-Präprozessoren, die @import unterstützen, sollte angemerkt werden, dass sie anders funktionieren als natives CSS. @import ist eine separate HTTP-Anforderung für diese Datei.
@namespace
Diese Regel ist besonders nützlich für die Anwendung von CSS auf XML HTML (XHTML), damit XHTML-Elemente als Selektoren im CSS verwendet werden können.
/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);Verschachtelte Regeln
Verschachtelte Regeln enthalten eine Teilmenge zusätzlicher Anweisungen, von denen einige bedingt für eine bestimmte Situation gelten können.
@[KEYWORD] {
/* Nested Statements */
}@document
Diese Regel legt Bedingungen für Stile fest, die auf eine bestimmte Seite angewendet werden. Wir können beispielsweise eine URL angeben und dann die Stile für diese spezielle Seite anpassen. Diese Stile werden auf anderen Seiten ignoriert.
@document
/* Rules for a specific page */
url(https://css-tricks.de/),
/* Rules for pages with a URL that begin with... */
url-prefix(https://css-tricks.de/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
/* Start styling */
body { font-family: Comic Sans; }
}Die Browserunterstützung für @document ist zum Zeitpunkt des Schreibens ziemlich schwach.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nein | Nein | Begrenzt | Nein | Nein | Nein | Nein |
@font-face
Diese Regel ermöglicht es uns, benutzerdefinierte Schriftarten auf einer Webseite zu laden. Es gibt unterschiedliche Unterstützungsgrade für benutzerdefinierte Schriftarten, aber diese Regel akzeptiert Anweisungen, die diese Schriftarten erstellen und bereitstellen.
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}Mehr über @font-face erfahren
Wie man @font-face in CSS verwendet
Die neue kugelsichere @Font-Face-Syntax
Was hat es mit der Deklaration von Font-Eigenschaften bei @font-face auf sich?
Das @font-face-Dilemma
Kopieren Sie nicht einfach @font-face aus Google Fonts-URLs
Wie man eine Schriftart in CSS umbenennt
Benutzerdefinierte Schriftarten in E-Mails
FOUT, FOIT, FOFT
Die besten Strategien zum Laden von Schriftarten und deren Umsetzung
Öffentliche Bekanntmachung: Achten Sie auf Ihre @font-face font-weight
@keyframes
Diese Regel ist die Grundlage für Keyframe-Animationen für viele CSS-Eigenschaften, indem sie es uns ermöglicht, die Start- und Stoppmarken (und die dazwischen liegenden) für das, was animiert wird, festzulegen.
@keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}Mehr über @keyframes erfahren
Keyframe-Animationssyntax
Debugging von CSS-Keyframe-Animationen
CSS-Animationen mittendrin beginnen
CSS-Keyframe-Animation mit Verzögerung zwischen Iterationen
Eine neue Art, Keyframe-Animationen zu verzögern
Mit einem Satz CSS-Keyframes zu verschiedenen Endzuständen animieren
Wie viel Spezifität haben @Rules wie @keyframes und @media?
Verwenden von benutzerdefinierten Eigenschaften zur Verwaltung von Variationen in Keyframe-Animationen
„Schüttel“-CSS-Keyframe-Animation
@media
Diese Regel enthält bedingte Anweisungen für die gezielte Anwendung von Stilen auf bestimmte Bildschirme. Diese Anweisungen können Bildschirmgrößen enthalten, was nützlich sein kann, um Stile an Geräte anzupassen.
/* iPhone in Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.module { width: 100%; }
}Oder Stile nur dann anzuwenden, wenn das Dokument gedruckt wird.
@media print {
}Mehr über @media erfahren
Guide zu CSS Media Queries
Benennung von Media Queries
Verschachtelte Media Queries
Die neue CSS Media Query Range-Syntax
Logik in CSS Media Queries (Wenn / Sonst / Und / Oder / Nicht)
Eine Einführung in die Reduced Motion Media Query
Bandbreiten-Media-Queries
Animierte Media Queries
CSS Media Queries & Nutzung des verfügbaren Platzes
Wie viel Spezifität haben @Rules wie @keyframes und @media?
@page
Diese Regel definiert Stile für einzelne Seiten beim Drucken des Dokuments. Sie enthält speziell Pseudo-Elemente zum Stylen der :first-Seite sowie der :left- und :right-Ränder der Seite.
@page :first {
margin: 1in;
}@property
CSS-Variablen gibt es schon eine Weile. Wir können sie ziemlich einfach für alle Werte definieren, die wir regelmäßig verwenden, wie z. B. Farben.
:root {
--primary-color: oklch(70% 0.183 42.88);
}
body {
color: var(--primary-color);
}Das ist natürlich fantastisch. Aber es ist nicht nur Glanz und Gloria. Zum Beispiel ist es unmöglich, zwischen zwei Variablen zu animieren, wie z. B. den Farben eines Farbverlaufs. Sie denken vielleicht, es sei möglich, durch den gesamten Farbrad zu drehen, indem Sie eine Variable für den Farbton einer Farbe in einer Farb Funktion wie dieser einrichten.
:root {
--hue: 0;
}
body {
animation: hue 5s linear infinite;
background-color: hsl(var(--hue) 80% 50%);
}
@keyframes hue {
0% { --hue; }
100% { --hue: 360; }
}Das sieht sicher gültig aus! Aber es funktioniert einfach nicht. Das liegt daran, dass CSS erkennt, dass diese Zahl als Zeichenkette und nicht als tatsächliche Zahl behandelt wird. Wir müssen eine sogenannte benutzerdefinierte Eigenschaft registrieren, um alles zu verbinden.
Hier kommt @property ins Spiel. Es wird verwendet, um nicht nur eine CSS-Variable zu registrieren, sondern auch ihren Typ, den Anfangswert, zu dem sie standardmäßig gesetzt wird, und ob sie Werte von anderen Eigenschaften erbt oder nicht. Es ist sehr ähnlich wie die Definition unserer eigenen Spezifikation für eine bestimmte Art von Daten!
Um auf den animierten Farbverlauf zurückzukommen, richten wir unsere benutzerdefinierte Eigenschaft ein.
@property --hue {
syntax: "<number>";
initial-value: 0;
inherits: false;
}Jetzt können wir --hue tatsächlich verwenden, um den gesamten Farbrad zwischen 0deg und 360deg zu durchlaufen.
body {
animation: hue 5s linear infinite;
background-color: hsl(var(--hue) 100% 50%);
}
@keyframes hue {
0% { --hue; }
100% { --hue: 360; }
}Lesen Sie den Artikel „Interpolating Numeric CSS Variables“ für eine vollständige Erklärung, wie @property funktioniert, sowie eine Demo des animierten Farbverlaufs.
Mehr über @property erfahren
Guide zu CSS Custom Properties
@property
Verwenden von @property für CSS-benutzerdefinierte Eigenschaften
@property und seine animierenden Kräfte erkunden
Interpolieren numerischer CSS-Variablen
Knifflige Fragen zu benutzerdefinierten Eigenschaften
Komplexe CSS-Übergänge mit benutzerdefinierten Eigenschaften und cubic-bezier() erstellen
Bildfragmentierungseffekt mit CSS-Masken und benutzerdefinierten Eigenschaften
@supports
Diese Regel 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. Sie ist so etwas wie Modernizr, aber speziell für CSS-Eigenschaften.
/* Check one supported condition */
@supports selector(::thumb) {
/* If ::thumb is supported, style away! */
}
/* Check multiple conditions */
@supports (color: oklch(50% .37 200)) and (color: color-mix(white, black)) {
background-color:
}Der Operator not ist eine Möglichkeit zu prüfen, ob ein Browser ein Feature *nicht* unterstützt, um Fallback-Stile für diese Fälle festzulegen.
.element {
color: oklch(50% .37 200);
}
/* If the oklch() color function is not support, set a fallback color */
@supports not (color: oklch(50% .37 200)) {
.element {
color: #0288D1;
}
}Hier ist die, ähm, Unterstützung für @supports
| Chrome | Edge | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|---|
| 28+ | 12+ | 9+ | 22+ | 12.1+ | Nein | 4.4+ | 9+ |
Erfahren Sie mehr über @supports
@container
Diese At-Regel wurde im Februar 2023 mit der Einführung von Container Queries eingeführt, einer Funktion, mit der Sie ein Element als container registrieren und Stile auf andere Elemente anwenden können, wenn der Container eine bestimmte Bedingung erfüllt. Es ähnelt sehr @media Queries, aber @container betrachtet ein bestimmtes Element anstelle der Viewport-Größe.
.parent {
container: article / inline-size;
}
.child {
display: flex;
}
@container article (width > 800px) {
.child {
flex-direction: column;
}
}Erfahren Sie mehr über Container Queries
Ein Füllhorn an Container Queries
Die Entstehungsgeschichte von Container Queries
Tiefer eintauchen in Container-Stil-Queries
Container-Einheiten sollten ziemlich praktisch sein
Container Queries: Noch einmal auf in die Bresche
iShadeeds Container Queries Lab
Diskussion zu Container Queries
Next Gen CSS: @container
Sagen Sie „Hallo“ zu CSS Container Queries
251: Container Queries sind die Zukunft
256: Wann @container Queries verwendet werden sollen
Zusammenfassend
Die at-rule ist der Schlüssel, um CSS verrückte und interessante Dinge tun zu lassen. Während die Beispiele hier einfach sind, können wir sehen, wie sie verwendet werden können, um Stile für sehr spezifische Bedingungen zu erstellen und so Benutzererlebnisse und Interaktionen zu schaffen, die zu einem Szenario passen.
Es könnte sich lohnen, hinzuzufügen, dass '@import' vor allen anderen Regeltypen außer @charset stehen MUSS – man kann sich leicht enorm viel Zeit verschwenden, wenn man das nicht weiß ;)
https://developer.mozilla.org/en-US/docs/Web/CSS/@import
Genau. So wahr – habe eine Notiz dazu hinzugefügt.
Was bevorzugen Leute für Druckstile? Sollen sie in Ihr Haupt-Stylesheet mit @print aufgenommen werden und eine HTTP-Anfrage sparen? Oder ein separates Druck-Stylesheet erstellen und etwas Gewicht von Ihrem Basis-Stylesheet einsparen?
Ich stelle mir vor, die Menge der Druckstile würde die eine Methode gegenüber der anderen begünstigen, d. h. nur wenige Stile würden in Ihr Stylesheet aufgenommen werden, aber ein komplexeres Drucklayout mit vielen Stilen wäre vielleicht als separate Datei besser. Andere Überlegungen?
Browser laden ohnehin beide herunter, also könnten Sie sie auch zusammenfassen. Und Druckstile sind normalerweise recht kleine Ergänzungen zu Basisstilen, zumindest war das meine Erfahrung.
Wenn Sie einen Präprozessor verwenden, können Sie eine Teil-Datei _print.scss für Druckstile haben, die in die
@media print{}eingeschlossen ist. Am Ende sollten sie alle eine einzige Datei sein, um mehrere Anfragen zu vermeiden, da das Setzen von media="print" auf Link den Browser nicht davon abhält, Druckdateien herunterzuladen.Es ist gut zu wissen, dass @charset eigentlich nicht als Regel geparst wird. Der Parser prüft nur, ob die Datei mit der Sequenz „@charset …;“ beginnt.
Das bedeutet, dass Sie in der Deklaration keine einfachen Anführungszeichen oder Leerzeichen verwenden können und dass sie die allererste sein muss (auch vor @import Regeln).
http://www.w3.org/TR/css-syntax-3/#charset-rule
Von der @document Regel wusste ich nichts. Das muss ich mir merken. Das ist eine gute Alternative zu den Body-Klassen von WordPress, um verschiedene Seiten zu gestalten.
Ich bin kein Fan – für mich ist das ein Problem der Trennung von Verantwortlichkeiten.
Ich wäre vorsichtig – Klassen können Sie immer ändern, aber die URL-Struktur einer Website zu ändern ist nicht immer so einfach.
Dieser Artikel erwähnt die Browserunterstützung nicht wirklich, aber laut MDN wurde
@documentauf CSS4 verschoben und wird nur von Firefox mit dem Präfix-moz-unterstützt… https://developer.mozilla.org/en-US/docs/Web/CSS/@document@Qbe Root, es gibt kein CSS4: http://www.xanthir.com/b4Ko0
Ich wünschte, Chrome würde
@documentunterstützen :/https://developer.mozilla.org/en-US/docs/Web/CSS/@document#Browser_compatibility
Ich war schon so aufgeregt deswegen, bis ich weiterlas über die Unterstützung… eines Tages!
Zustimmung! Der mangelnde Support für
@documentist ein echter Nachteil. Ich habe den Beitrag aktualisiert, um die aktuelle Unterstützung anzuzeigen, damit wir noch keine zu große Aufregung erzeugen. :)Hey Chris, ich denke, du hast einen Tippfehler im @import-Abschnitt. Es sei denn, es gibt Prepreprocessors und ich bin einfach total aus der Übung :)
Danke für den Hinweis! Behoben. :)
Ich dachte, Prepreprocessors seien für Dinge, wenn man etwas Verrücktes macht?
Danke für das Teilen dieses großartigen Beitrags, ich fand ihn bei einem meiner Webdesign-Projekte sehr hilfreich.