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.
@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-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("import-rule-xxl.css") only screen and (min-width: 1500px);
Diese Schreibweise – import-Regel innerhalb der @media-Regel – funktioniert hingegen nicht:
@media (min-width: 1500px) {
@import url("import-rule-xxl.css")
}
Die @import-Regel kann nicht innerhalb einer anderen Regel verschachtelt werden und muss vor allen anderen Deklarationen stehen.
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>