CSS import-Regel

CSS in HTML-Datei einbinden

Die CSS @import-Regel fügt ein Stylesheet in ein anders ein. Sinnvoll ist der Import wenn die Webseite mehr als eine CSS-Datei einbindet und ein Basissatz von Regeln in mehrere Stylesheets eingebunden werden soll: z.B. für Farben, Schrift oder Abmessungen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

CSS-Datei in CSS-Dateien importieren

Eine CSS-Datei für globale Stile, z.B. für die kleinen Viewports der mobilen Geräte und eine für die großen Monitore von Desktop-Rechnern, ist ein Fall für den Import. 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(global.css);

Die import-Regel sitzt als erste Anweisung in den jeweiligen CSS-Dateien.

CSS-Regeln für mehrere CSS-Dateien
Die importiere CSS-Datei wird nicht zusätzlich mit einem link-Tag eingebunden.

@import galt in der Vergangenheit als wenig empfehlenswerte Methode zum Einbinden einer CSS-Datei, denn mit dem alten 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 wir können viele der alten Tricks begraben, mit denen wir das letzte Quäntchen Ladezeit aus den Seiten gequetscht haben.

Unter dem HTTP/1.1 Protokoll war die Zahl der parallel geladenen externen Dateien eng begrenzt. HTTP/2 hingegen erlaubt mehrere Anfragen über eine einzige Verbindung. Gerade in Hinsicht auf das CSS können wir anstelle einer mächtigen unüberschaubaren Monster-CSS-Datei überschaubare CSS-Module laden.

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 type="text/css" title="text/css" media="screen">
   @import url(/style.css);
   @import url(/theme/style.css);
   pre { background-color: silver; border: 1px solid silver; }
   code { color: blue; }
</style>