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.

Medienspezifisches Einbinden von Stylesheets

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.

• 
• 
• 
• 
• 
• 

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

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

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.

• 
• 
• 
• 
• 
• 

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

Kombination verschiedener @-Regeln

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

responsive Tabelle ansehen …im Viewport-Emulator

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

ansehen …im Viewport-Emulator

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.

ansehen …im Viewport-Emulator