@import
@import url("datei.css") [layer(Name)] [supports(Bedingung)] [Medienbedingung];
Fügt den Inhalt einer anderen Datei in ein Stylesheet ein, als stünde er dort. Die Regel muss ganz am Anfang der Datei stehen – davor dürfen nur @charset und @layer ohne Block kommen. Wahlweise legt sie die importierten Stile in eine Ebene oder lädt sie nur, wenn eine Bedingung erfüllt ist.
Werte
- url("datei.css") oder nur "datei.css" – die URL relativ zu der Datei, in der das
@importsteht. - layer(Name) oder layer – die Stile in eine Ebene; Chrome ab 99, Firefox ab 97, Safari ab 15.4.
- supports(Bedingung) – nur, wenn der Browser die Eigenschaft oder den Wert kennt; Chrome ab 122, Firefox ab 115, Safari ab 17.5.
- print, (width >= 700px)… – nur für das angegebene Medium.
Beispiele
Eine fremde Bibliothek in eine Ebene mit niedrigerer Priorität und die Druckstile separat:
@layer library, site;
@import url("library.css") layer(library);
@import url("print.css") print;
Das Ergebnis: Alles aus der Ebene site und außerhalb von Ebenen überschreibt die Regeln aus library.css; print.css gilt nur beim Drucken.
Worauf Sie achten sollten
- Ein
@importnach irgendeiner anderen Regel verwirft der Browser stillschweigend. - Eine importierte Datei wird erst geladen, wenn die importierende Datei heruntergeladen ist – eine Kette von Importen verzögert die Anzeige der Seite. Im Web sind mehrere Elemente
<link rel="stylesheet">im HTML oder eine zusammengefasste Datei schneller. - Eine mit Medienbedingung importierte Datei wird auch dann heruntergeladen, wenn die Bedingung nicht gilt; sie wird nur nicht verwendet.
Browserunterstützung
Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).