CSS/@-Regeln
- Liste der @-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
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.
@import "druck-stylesheet.css" print, embossed;
@import 'viel-platz.css' screen and (min-width: 600px);
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 beispielsweise Regelsätze zusammenfassen, die nur für ein bestimmtes Ausgabemedium oder Seiten einer bestimmten Domain gelten sollen.
@media - Medienspezifische Abschnitte
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.
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
Kombination verschiedener @-Regeln
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 */
}
}
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);
}
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.
@supports (selfhtml: ist toll) {
@media screen and (max-width: 42em) {
thead {
display: none;
}
/* weitere Anweisungen */
}
}
selfhtml
gibt.
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.