CSS/@-Regeln
Neben Regelsätzen, die das Zuordnen von Eigenschaften zu Elementen ermöglichen, gibt es in CSS noch eine weitere Sorte von Regeln. Diese Regeln beginnen mit dem At-Zeichen (@), daher nennt man sie @-Regeln.
Inhaltsverzeichnis
@charset - Angabe der Zeichencodierung[Bearbeiten]
Mit der @charset-Regel kann angegeben werden, in welcher Zeichencodierung ein Stylesheet verfasst wurde.
Diese Regel wird nur dann beachtet, wenn die Zeichencodierung nicht durch eine der folgenden Alternativen festgelegt wurde: Durch einen HTTP-Header, durch eine Byte-Order-Mark oder durch das Dokument, in dem sich das Stylesheet befindet (d.h. @charset ist in einem HTML style-Element wirkungslos).
Da die Codierung eines Dokuments bzw. eines Stylesheets eine sehr grundlegende Information ist, gelten strenge Regeln bei der Verarbeitung dieser @-Regel. Die Angabe der Zeichencodierung ist jedoch optional, wenn das Stylesheet in UTF-8 kodiert wurde, da es sich dabei um die Standardcodierung handelt.
Die Regel muss im Stylesheet an allererster Stelle stehen, d.h. kein einziges Zeichen darf vor dem @-Zeichen notiert werden. Im Gegensatz zu anderen Bestandteilen von CSS darf @charset nur in Kleinbuchstaben geschrieben werden.
Nach @charset folgt genau ein Leerzeichen gefolgt von einem doppelten Anführungszeichen. Direkt darauf folgt der Name der verwendeten Zeichencodierung. Bei diesem Namen spielt es keine Rolle, ob er in Groß- oder Kleinbuchstaben verfasst wurde. Direkt nach dem Codierungsnamen folgt wieder ein doppeltes Anführungszeichen sowie ein abschließender Strichpunkt.
Die @charset-Regel darf nur einmal in einem Dokument vorkommen.
@charset "utf-8"; /* Korrekt. */
@charset "ISO-8859-1"; /* Korrekt. */
@charset 'utf-8'; /* Falsch (nur doppelte Anführungszeichen sind erlaubt). */
@viewport - Anpassungen für unterschiedliche Ausgabegeräte[Bearbeiten]
Die @viewport-Regel erlaubt Festlegungen für die Darstellung auf unterschiedlichen visuellen Ausgabemedien. Sie soll die von Apple stammende Viewport-Einstellung mit <meta name="viewport" ...> standardisieren und ersetzen.
Details: caniuse.com
Folgende Angaben sind möglich:
-
widthals zusammenfassende Eigenschaft von-
min-widthundmax-width
-
-
heightals zusammenfassende Eigenschaft von-
min-heightundmax-height
-
-
zoom -
min-zoom -
max-zoom -
user-zoom -
orientation -
resolution
Achtung!
<meta name="viewport" content="width=device-width, initial-scale=1.0"> (siehe Viewport einstellen) @import - Einbinden externer Stylesheets[Bearbeiten]
Die @import-Regel erlaubt es einem Stylesheet, ein anderes Stylesheet einzubinden („zu importieren“). Sie ist also das CSS-Gegenstück zu den zahlreichen Varianten, Stylesheets in HTML- oder XML-Dokumente einzubinden.
Eine @import-Regel muss am Beginn eines Stylesheets (nach @charset, aber vor allen anderen Regelsätzen) notiert werden. Nach @import folgt die Angabe der Adresse des einzubindenden Stylesheets. CSS erlaubt dazu sowohl Zeichenketten als auch Dateireferenzierung.
Ein Dokument darf auch mehrere @import-Regeln enthalten.
@import "stylesheet1.css";
@import url('http://www.example.org/stylesheet2.css');
Medienspezifisches Einbinden von Stylesheets[Bearbeiten]
Das Einbinden von Stylesheets kann auch bei der @import-Regel ein bestimmte Ausgabemedien gebunden werden. Dazu wird nach Angabe der einzubindenden Datei eine Medienabfrage formuliert. Es handelt sich dabei aber nicht um eine Zeichenkette, daher wird auf Anführungszeichen verzichtet.
@import "druck-stylesheet.css" print, embossed;
@import 'viel-platz.css' screen and (min-width: 600px);
print eingebunden werden.Sie können für jede Internetseite beliebig viele Stylesheets einbinden. Beachten Sie dabei jedoch sowohl die Regeln zur Reihenfolge der Abarbeitung von CSS-Deklarationen als auch die Hinweise zur Performanceoptimierung.
Spezifische Abschnitte[Bearbeiten]
Wenn Regeln für unterschiedliche Medien, Browser oder Dokumente festgelegt werden sollen, ist es nicht erforderlich, diese in unterschiedliche Dateien auszulagern. Mithilfe verschiedener @-Regeln lassen sich beispielsweiseRegelsätze zusammenfassen, die nur für ein bestimmtes Ausgabemedium oder Seiten einer bestimmten Domain gelten sollen.
@media - Medienspezifische Abschnitte[Bearbeiten]
Mit der @media-Regel können CSS-Deklarationen zusammengefasst werden, die nur für ein bestimmtes Medium gültig sind. Innerhalb eines Stylesheets können mehrere medienspezifische Abschnitte definiert werden.
Details: caniuse.com
Die Regel besteht aus dem einleitenden @media, einer Medienabfrage sowie einem durch geschweifte Klammern begrenzten Abschnitt. Innerhalb dieses Abschnitts werden die für das Medium geltenden Regelsätze notiert.
@media screen
{
p {font-size: 1.5em;}
}
@media print
{
p {font-size: 13pt;}
}
Siehe auch: Formular zum ausfüllen und dann ausdrucken
@document - Herkunftspezifische Abschnitte[Bearbeiten]
Mit der @document-Regel lassen sich Abschnitte von CSS-Deklarationen speziell für Dokumente einer bestimmten Herkunft erstellen. Besonders ist dies für User-Stylesheets interessant. Innerhalb eines Stylesheets können mehrere herkunftspezifische Abschnitte definiert werden.
Die Regel besteht aus dem einleitenden @document, einer Herkunftsabfrage sowie einem durch geschweifte Klammern begrenzten Abschnitt. Innerhalb dieses Abschnitts werden die für das Medium geltenden Regelsätze notiert.
@document url('http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/@-Regeln')
{
li {font-size: 1.5em;} /* # 1 # */
}
@document url-prefix('http://wiki-test2.selfhtml.org')
{
html, body {background-color: red;} /* # 2 # */
}
@document domain('selfhtml.org')
{
* {color: #780000;} /* # 3 # */
}
- gibt für Listenelemente dieser (und nur dieser) Seite eine Schriftgröße vor (# 1 #)
- setzt für alle html- und body-Elemente des Test-Wikis einen roten Hintergrund (# 2 #)
- legt für alle Seiten der Domain „selfhtml.org“, einschließlich Subdomains eine rotbraune Schriftfarbe fest (# 3 #)
Achtung!
@document ist noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Regeln verwenden.
Für Firefox
-
@-moz-document
für Safari und Chrome
-
@-webkit-document
@supports - Browserspezifische Abschnitte[Bearbeiten]
Mit der feature query @supports teilen Sie Browsern mit, dass enthaltene Regeln nur angewendet werden sollen, wenn der Browser eine bestimmte Eigenschaft oder den Wert einer Eigenschaft beherrscht.
Details: caniuse.com
Die Regel besteht aus einem einleitenden @supports gefolgt von beliebig vielen in runden Klammern durch boolsche Operatoren (AND, OR und NOT) verknüpfte syntaktisch korrekte CSS-Deklarationen. Anschließend folgen in geschweiften Klammern die entsprechenden Deklarationen.
div > * {
display: inline-block;
}
@supports (display: grid) {
div {
display: grid;
}
}
Für Browser, die die Eigenschaft display:grid unterstützen, wird das div zum Grid-Container. Browser, die grid nicht kennen, ordnen alle Kindelemente des div (die Rasterelemente) durch display:inline-block nebeneinander an.
@supports not (display: grid) {
div > * {
display: inline-block;
}
}
Für Browser, die die Eigenschaft display: grid nicht unterstützen, werden die Kindelemente des div nebeneinander platziert.
@supports-Regel nicht. Deshalb ist die obere Variante vorzuziehen!
font-size, der je nach Ausgabemedium ein anderer Wert zugewiesen wird: Für Bildschirmausgaben die relative Einheit Em, für Ausdrucke die absolute Einheit Punkt.