CSS import-Regel – CSS-Datei in CSS-Datei importieren

CSS-Datei in CSS-Dateien importieren

Eine CSS-Datei für globale Stile, z.B. für die kleinen Viewports der mobilen Geräte kann mit der @import-Regel eine weitere CSS-Datei für große Monitore in einer Media Query anfordern. Schriftfamilien und Farben sollen im Gegensatz zu Abmessungen konsistent gehalten werden. Diese Stile wandern in eine dritte CSS-Datei und sowohl die CSS-Datei für mobile Geräte als auch die Datei für große Monitoren importieren die gemeinsamen Stile mit der Import-Regel.

@import url("styles-large.css") (min-width: 768px);

@import galt in der Vergangenheit als wenig empfehlenswerte Methode zum Einbinden einer CSS-Datei, denn mit dem HTTP/1.1-Protokoll blockierenten importierte CSS-Dateien parallele Downloads. Der Browser musste warten, bis die importierten Dateien geladen waren, bevor er weitere Dateien herunterladen konnte.

Heute arbeiten die meisten modernen Server mit dem HTTP/2-Protokoll. HTTP/2 macht alles etwas einfacher und erlaubt mehrere Anfragen über eine einzige Verbindung. Gerade in Hinsicht auf das CSS könnten wir anstelle einer mächtigen unüberschaubaren Monster-CSS-Datei überschaubare CSS-Module laden.

Dennoch sollte @import mit Bedacht eingesetzt werden: Bevor große Zahl von CSS-Dateien importiert wird, ist eine kombinierte CSS-Datei effizienter. In solchen Fällen sind CSS-Präprozessoren, Webpack oder CSS-Parser wie Parcel die bessere Wahl.

@import-Regel in @media-Regel

Die import-Regel kann mit einer Media Query kombiniert werden. So kann z.B. der Basis-Satz von Regeln für die lineare Darstellung der Elemente auf kleinen Viewports nur dann ergänzt werden, wenn die Seite auf einem großen Monitor mit einem komplexeren Layout geladen wird.

@import url("styles-large.css") only screen and (min-width: 768px);

Diese Schreibweise – import-Regel innerhalb der @media-Regel – funktioniert hingegen nicht:

@media (min-width: 768px) {
	@import url(""styles-large.css")
}

Die @import-Regel kann nicht innerhalb einer anderen Regel verschachtelt werden und muss vor allen anderen Deklarationen stehen.

Sind @import-Regeln sinnvoll?

Auch wenn CSS-Dateien asynchron geladen werden, blockieren importiere CSS-Dateien das Rendering der Seite, bis sie vollständig geladen und interpretiert sind. Der Browser beginnt mit dem Seitenaufbau erst, wenn alle importierten Dateien verarbeitet sind.

Im folgenden Beispiel ist das ursprüngliche CSS

.card h2 {
	background: salmon;
}

In der importierten Datei soll der Selektor .card h2 überschrieben werden.

.card h2 {
	background: cornflowerblue;
}

Der Headertext der card-Elemente bleibt lachsfarben.

Die importierten CSS-Eigenschaften überschreiben Regeln der ursprünglichen CSS-Datei u.U. nicht. Die Spezifität eines Selektors der ursprünglichen CSS-Datei ist höher als die Spezifität des gleichen Selektors der importierten Datei. Bei einem Konflikt wird der Selektor der ursprünglichen CSS-Datei herangezogen.

Anders sieht es aus, wenn CSS-Präprozessoren wie LESS eingesetzt werden. LESS holt mit @import den Inhalt von importieren Stylesheet-Dateien und fügt den Inhalt in das compilierte Stylesheet ein. So entsteht nur ein HTTP-Request, aber der CSS-Code kann in überschaubaren Stücken organisiert werden.

Import von CSS-Dateien im style-Tag

Das style-Tag steht im HEAD der HTML-Datei und kann sowohl Anweisungen zum Laden externer CSS-Dateien als auch direkte Vereinbarungen von CSS-Eigenschaften enthalten. Auch ein style-Element bindet externe CSS-Dateien durch die Anweisung @import ein, und zwar ebenfalls an den Anfang des Style-Elements.

<style>
   @import url(/style.css);
   @import url(/theme/style.css);
   pre { 
      background-color: silver; 
      border: 1px solid silver;
   }
   code { color: blue; }
</style>

Sinnvoll ist dieses Vorgehen allerdings nicht. Die zusätzlichen link-Tags trennen HTML-Code und CSS-Styling besser als eine @import-Regel. Das CSS im <style>-Tag wird sequenziell verarbeitet und blockiert u.U. den Seitenaufbau.