Zusammenfassung der @-Verwendung in CSS (mit Beispielen und Erklärungen)

Eine At-Regel ist eine Deklaration, die Anweisungen für die Ausführung oder das Verhalten von CSS bereitstellt. Jede Deklaration beginnt mit @, gefolgt von einem verfügbaren Schlüsselwort, das als Bezeichner fungiert und angibt, was das CSS tun soll. Dies ist eine allgemeine Syntax, obwohl jede At-Regel andere syntaktische Variationen aufweist.

Allgemeine Regeln

Allgemeine Regeln folgen der folgenden Syntax:

Der Code lautet wie folgt:

@[SCHLÜSSELWORT] (REGEL);

@Zeichensatz
Diese Regel definiert den Zeichensatz, den der Browser verwendet, wenn das Stylesheet Nicht-ASCII-Zeichen enthält (z. B. UTF-8). Beachten Sie, dass der im HTTP-Header platzierte Zeichensatz die @charset-Regel überschreibt.

Der Code lautet wie folgt:

@Zeichensatz "UTF-8";

@Import
Diese Regel gibt an, dass das Stylesheet angefordert wird. In dieser Zeile wird, wenn der Inhalt korrekt ist, eine externe CSS-Datei importiert.

Der Code lautet wie folgt:

@import 'global.css';

Obwohl alle gängigen CSS-Präprozessoren @import unterstützen, ist zu beachten, dass sie anders funktionieren als natives CSS: Präprozessoren greifen auf CSS-Dateien zu und verarbeiten sie zu einer CSS-Datei, während bei nativem CSS jeder @import eine separate HTTP-Anfrage ist.
@Namensraum

Diese Regel ist sehr nützlich für die Anwendung von CSS auf XML HTML (XHTML), da XHTML-Elemente als Selektor in CSS verwendet werden können.

Der Code lautet wie folgt:

/* Namespace für XHTML */
@Namespace-URL (http://www.w3.org/1999/xhtml);
/* Namespace für in XHTML eingebettetes SVG */
@namespace SVG-URL (http://www.w3.org/2000/svg);

Verschachtelte Regeln

Verschachtelte Regeln enthalten zusätzliche Teilmengendeklarationen, von denen einige nur in bestimmten Situationen gelten.

Der Code lautet wie folgt:

@[SCHLÜSSELWORT] {
/* Verschachtelte Anweisungen */
}

@dokumentieren
Diese Regel legt Bedingungen für das Stylesheet fest: Es kann nur auf bestimmte Seiten angewendet werden. Beispielsweise geben wir eine URL an und passen die Stile für diese bestimmte Seite an. Auf anderen Seiten werden diese Stile ignoriert.

Der Code lautet wie folgt:

@dokumentieren
/* Regeln für eine bestimmte Seite */
URL (http://css-tricks.com/),
/* Regeln für Seiten mit einer URL, die mit ... beginnt */
URL-Präfix (http://css-tricks.com/snippets/),
/* Regeln für alle auf einer Domain gehosteten Seiten */
Domäne (css-tricks.com),
/* Regeln für alle sicheren Seiten */
regulärer Ausdruck("https:.*")
{
/* Beginnen Sie mit dem Styling */
Textkörper { Schriftfamilie: Comic Sans; }
}

@Schriftart
Mit dieser Regel können benutzerdefinierte Schriftarten auf Webseiten geladen werden. Es gibt unterschiedliche Grade der Unterstützung für benutzerdefinierte Schriftarten, aber diese Regel akzeptiert Anweisungen zum Erstellen und Bereitstellen dieser Schriftarten.

Der Code lautet wie folgt:

 @Schriftart {
Schriftfamilie: „MyWebFont“;
Quelle: URL('myfont.woff2') Format('woff2'),
url('meineSchriftart.woff') format('woff');
}

@Schlüsselbilder
Diese Regel ist neben vielen CSS-Eigenschaften die Grundlage für Keyframe-Animationen und ermöglicht es uns, den Anfang und das Ende einer Animation zu markieren.

Der Code lautet wie folgt:

 @keyframes Puls {
0% {
Hintergrundfarbe: #001f3f;
}
100 % {
Hintergrundfarbe: #ff4136;
}
}

@Medien
Diese Regel enthält bedingte Deklarationen, mit denen Stile für bestimmte Bildschirme angegeben werden können. Diese Deklarationen können Bildschirmgrößen enthalten, was bei bildschirmspezifischen Stilen nützlich sein kann.

Der Code lautet wie folgt:

 /* iPhone im Hoch- und Querformat */
@Nur Medien-Bildschirm 
und (min. Gerätebreite: 320px) 
und (maximale Gerätebreite: 480px)
und (-webkit-min-device-pixel-ratio: 2) {
.module { Breite: 100 %; }
}

Oder wenden Sie den Stil erst an, wenn das Dokument gedruckt wird.

Der Code lautet wie folgt:

@media drucken {
}

@Seite
Diese Regel definiert die Stile für einzelne Seiten, die gedruckt werden. Insbesondere können Ränder für Seitenpseudoelemente festgelegt werden: :first, :left und :right

Der Code lautet wie folgt:

@Seite :erste {
Rand: 1 Zoll;
}

@unterstützt
Diese Regel testet, ob der Browser eine bestimmte Funktion/Funktionalität unterstützt und wendet, wenn dies der Fall ist, bestimmte Stile auf diese Elemente an. Ein bisschen wie Modernizr, aber für CSS-Eigenschaften.

Der Code lautet wie folgt:

/* Eine unterstützte Bedingung prüfen */
@supports (Anzeige: Flex) {
.module { Anzeige: flex; }
}
/* Mehrere Bedingungen prüfen */
@supports (Anzeige: Flex) und (-Webkit-Erscheinungsbild: Kontrollkästchen) {
.module { Anzeige: flex; }
}

Zusammenfassen

At-Regeln können dazu führen, dass CSS verrückte und interessante Dinge tut. Obwohl die Beispiele im Artikel einfach sind, können Sie sehen, wie sie Stile für bestimmte Bedingungen verwenden, um Benutzererlebnisse und Interaktionen zu erstellen, die bestimmten Szenarien entsprechen.

Dies ist das Ende dieses Artikels über die Zusammenfassung der @-Verwendung in CSS. Weitere relevante Inhalte zur @-Verwendung von CSS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!