CSS laden: als Datei, im style-Tag, Import, inline
Auf vier Wegen wird CSS in die HTML-Elemente der Webseite eingebunden: ① als externe CSS-Datei in einem link-Tag, ② in einem style-Element im Kopf der Seite, ③ als Import einer externen CSS-Datei in einem style-Tag oder CSS-Datei, ④ als inline-CSS im style-Attribut eines Tags. Alle Methoden dürfen gemischt werden.
Die CSS Kaskade
Weil sich CSS-Eigenschaften dabei gegenseitig überschreiben können, entsteht die CSS-Kaskade – daher der Begriff »Cascading Stylesheets«.
1. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
2. <style>
h4 { background-color: silver; }
</style>
3. <style>
@import url("style.css") screen;
</style>
4. <h4 style="background-color: silver">Inline-CSS</h4>
CSS ist nicht auf eine externe CSS-Datei beschränkt. Mit HTML link-Elementen und der import-Regel können beliebig viele externe CSS-Dateien eingebunden werden.
Grundsätzlich galt es vor HTTP2 als besser, nicht zu viele CSS-Dateien anzulegen. Jede CSS-Datei wird mit einem HTTP-Request geladen – das kostete vor allem den mobilen Geräten zusätzliche Ladezeit. Mit HTTP/2 kann die Trennung in mehrere CSS-Dateien zu einer besseren Übersicht und Organisation beitragen.
Damit eine große CSS-Datei übersichtlich bliebt, helfen ein CSS-Reset, eine strikte Organisation und eine saubere Struktur.
Link-Element für externe CSS-Dateien
Eine externe CSS-Datei mittels Link-Element im HEAD der Seite ist die erste Wahl, wenn mehr als ein HTML-Dokument mit denselben CSS-Regeln formatiert werden soll. link-Elemente werden im HEAD der HTML-Datei deklariert, dürfen aber auch am Ende der HTML-Datei stehen (um das initiale Laden der Seite nicht auszubremsen, wenn es für die Darstellung der Webseite im Browser nicht benötigt wird: print.css).
<head> <link href="style.css" type="text/css" media="screen" /> … </head> <body> <link href="theme/print.css" type="text/css" media="print" /> </body>
Das HTML-Attribut type weist den Browser an, nicht unterstützte Medientypen zu ignorieren. Ein Webbrowser soll auf dem Monitor also media="screen" lesen, aber media="print" für den Druck zu verwenden.
- Der Browser soll immer alle mit rel="stylesheet" bezeichneten CSS-Datei als primäre Stylesheet-Dateien anwenden.
- CSS-Dateien, die mit rel="alternate stylesheet" in das HTML-Dokument gebunden werden, soll der Browser ignorieren, bis der Benutzer oder eine Anwendung das Stylesheet aktiviert.
Die externe Stylesheet-Datei darf nur CSS-Anweisungen enthalten, aber kann mittels @import eine externe CSS-Datei laden.
style-Tag im head der Seite
Innerhalb von style-Tags stehen i.d.R. CSS-Eigenschaften, die individuell für das aktuelle Dokument gelten – also Abweichungen von den generellen Stylesheet-Regeln, die in link-Tags als CSS-Dateien eingebunden sind.
Die CSS-Regeln aus lokalen style-Elementen überschreiben Eigenschaften aus globalen CSS-Dateien.
<style media="projection">
body { font-size: 1.1em; }
</style>
style-Elemente im HEAD der HTML-Datei können neben direkte Vereinbarungen von CSS-Eigenschaften externe CSS-Dateien mittels @import-Regel einbinden.
Mit HTML5 konnte das style-Tag mit dem Attribut scoped ins body-Element gesetzt werden. Dann sollten nur die Regeln unterhalb des Elements, in dem das style-Tag notiert ist, gelten. Allerdings befolgt nur Firefox diese Regel. Alle anderen Browser wenden die Regeln auf alle Elemente des Dokuments an.
Zwischenzeitlich wurde das scoped-Attribut wieder abgeschafft. Mit HTML 5.2 ist ein style-Element im body der Seite wieder erlaubt, aber es soll keinen störenden Wiederaufbau der Seite erzeugen.
Dass CSS-Stile nicht scoped – auf einen Bereich beschränkt – angewendet werden können, macht größere CSS-Dateien unübersichtlich und ist die hinterhältigste aller Fehlerquellen im CSS.
Kommt eine CSS-Eigenschaft in eine Bar in Berlin.
In einer Kneipe in Düsseldorf-Kaarst fällt ein Barhocker um.
Quelle: Irgendwo in Twitter, aber leider den Autor vergessen …
Inline CSS: style-Attribut
Das HTML-Attribut style bringt CSS-Eigenschaften direkt in ein HTML-Tag. Diese Technik ist unflexibel und wird nur in Einzelfällen angewendet.
<p style="color: red">Hier darf nicht geflüstert werden!</p>
Das Ändern von Inline CSS über das style-Attribut gehört auch zur Basisausrüstung von Javascript.
CSS @layer
Wer in das Theme eines Content Management Systems eingreift (z.B. WordPress), muss mehrere CSS-Dateien kombinieren und Prioritäten setzen.
<head> … <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="theme.css"> … </head>
Regeln aus theme.css überschreiben die gleichen Selektoren aus layout.css oder reset.css, weil sie zuletzt geladen werden – genau das macht ja die Kaskade aus.
Bei großen CSS-Dateien kann es passieren, dass z.B. theme.css schneller geladen wird als layout.css, etwa wegen Browser-Caching, parallelem Download oder Netzwerkbedingungen. Ergebnis: Teile von theme.css überschreiben unerwartet layout.css.
CSS @layer teilen CSS-Dateien oder -Regeln in logische Schichten und bestimmen, welche Vorrang haben. So entsteht Unabhängigkeit von der Lade-Reihenfolge. Die Reihenfolge wird deklariert mit
<style>
@layer reset, layout, theme;
</style>
Auch @layer ist nicht das Wundermittel, das sich die Entwickler am Angang vorgestellt haben. @layer schaffen eine definierte Layer-Hierarchie zwischen großen Blöcken wie Reset, Base, Components, Overrides, und helfen bei der Lösung von Konflikten zwischen Stylesheets aus verschiedenen Quellen.
Innerhalb der Layer zählt die normale Kaskase. Die Reihenfolge der geladenen Dateien bleibt wichtig, und @layer kann nicht automatisch alle Probleme der CSS-Spezifität lösen. Wenn Dateien in einer unerwarteten Reihenfolge geladen werden, können Regeln trotzdem überschrieben werden.
)
