CSS/@-Regeln

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

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.


@charset - Angabe der Zeichencodierung[Bearbeiten]

Mit der @charset-Regel kann angegeben werden, in welcher Zeichencodierung ein Stylesheet verfasst wurde.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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.

Beispiel
@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.

  • Leer
  • Leer
  • IE 10
  • Leer
  • Leer

Details: caniuse.com

Folgende Angaben sind möglich:

  • width als zusammenfassende Eigenschaft von
    • min-width und max-width
  • height als zusammenfassende Eigenschaft von
    • min-height und max-height
  • zoom
  • min-zoom
  • max-zoom
  • user-zoom
  • orientation
  • resolution

Achtung!

Diese @-Regel ist derzeit (Stand: Oktober 2017) nur in den Internetexplorer ab Version 10 (mit Vendorpräfix -ms-) integriert. Verwenden Sie stattdessen <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.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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.

Beispiel
@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.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel
@import "druck-stylesheet.css" print, embossed;
@import 'viel-platz.css' screen and (min-width: 600px);
Beachten Sie: Internet Explorer bis Version 7 unterstützen das medienspezifische Einbinden von Stylesheets nicht. Internet Explorer 8 unterstützt diese Funktion zwar, ignoriert aber Stylesheets die für das Medium 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]

Hauptartikel: CSS/Media Queries

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.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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.

Beispiel
@media screen 
{
   p {font-size: 1.5em;}
}

@media print 
{
   p {font-size: 13pt;}
}
Dieses Beispiel zeigt die Eigenschaft 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.

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.

  • CSS 3.0
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

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.

Beispiel
@document url('https://example.com/@-Regeln') {
  li { font-size: 1.5em; } /* # 1 # */
}

@document url-prefix('https://wiki-test2.selfhtml.org') {
  html { border: thick solid red; } /* # 2 # */
}

@document domain('selfhtml.org') {
  :not(a) { color: #780000; } /* # 3 # */
}
Dieses Beispiel
  • gibt für Listenelemente dieser (und nur dieser) Seite eine Schriftgröße vor (# 1 #)
  • setzt für alle Seiten des Test-Wikis einen roten Rahmen (# 2 #)
  • legt für alle Seiten der Domain „selfhtml.org“, einschließlich Subdomains eine rotbraune Schriftfarbe fest (# 3 #)

Achtung!

Die @-Regel @document ist derzeit (Januar 2020) in keinem Browser implementiert, siehe caniuse.com.

@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.

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

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.

Featureabfrage, ob Grid Layout unterstützt wird
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.

Browser, die @supports nicht kennen, ignorieren den gesamten auf die Regel folgenden Block, unabhängig davon, ob dort Deklarationen verankert sind, die sie umsetzen könnten.

Beachten Sie: Prüfen Sie, ob Browser, für die Sie eigene CSS-Regeln erstellen möchten (meist wird es sich um ältere Browser handeln), die @supports-Regel unterstützen.
Beispiel
@supports not (display: grid) {
  div > * {
   display: inline-block;
  }
}
Diese Regel kommt etwa im IE11 nicht zur Anwendung, was zu unerwünschten Darstellungen führen kann.

Kombination verschiedener @-Regeln[Bearbeiten]

Die @Regeln, welche Deklarationen einschließen, dürfen ineinander verschachtelt werden, die Reihenfolge ist dabei egal.

@supports (--foo: 42) {
  table {
    --suffix: ": ";
  }
  @media screen and (max-width: 42em) {
    thead {
      display: none;
    }
    /* weitere Anweisungen */
  }
}
Die Darstellung der responsiven Tabelle wird für schmale Viewports nur aktiviert, wenn der Browser custom properties unterstützt und der Viewport weniger als 42em breit ist. Damit haben Sie jetzt die Möglichkeit, Inhalt (gehört ins HTML) und Darstellung (gehört ins Stylesheet) vollständig voneinander zu trennen.
Beachten Sie, dass lediglich geprüft wird, ob eine benutzerdefinierte Eigenschaft angelegt werden kann, eine Festlegung des Wertes 42 für die Eigenschaft foo findet nicht statt, die durchaus sinnvolle Verkürzung @supports (--suffix: ": ") ist also nicht möglich.
<table style="
  --colheader1: 'Rechnung';
  --colheader2: 'Datum';
  --colheader3: 'Höhe';
  --colheader4: 'Status';
  --colheader5: 'Zahlungseingang';"
>
table {
  --suffix: ": ";
}
th::before {
  content: var(--colheader1)var(--suffix);
}
Der Doppelpunkt zählt im Grunde nicht zum Inhalt, denn wenn die tabellarischen Daten in Form einer Tabelle dargestellt werden, ist er auch nicht gewünscht.

Browser, die @supports nicht kennen, ignorieren den gesamten auf die Regel folgenden Block, unabhängig davon, ob dort Deklarationen verankert sind, die sie umsetzen könnten.

responsive Tabelle in einem veralteten Browser ansehen …im Viewport-Emulator
@supports (selfhtml: ist toll) {
  @media screen and (max-width: 42em) {
    thead {
      display: none;
    }
    /* weitere Anweisungen */
  }
}
In diesem Fall erfolgt keine Umschaltung zwischen den Layouts, weil es keine CSS-Eigenschaft selfhtml gibt.