CSS @import-Regel

Die CSS-At-Regel @import lädt Style-Regeln aus einem externen Stylesheet in ein anderes. Sie ermöglicht es, CSS auf mehrere Dateien aufzuteilen (z. B. eine Datei pro Komponente oder Theme) und sie von einem einzigen Einstiegspunkt aus zu kombinieren. Außerdem kann ein Stylesheet bedingt auf Basis einer Media Query geladen werden.

Auf das Schlüsselwort @import muss der Pfad des einzubindenden Stylesheets folgen, entweder als url() oder als einfacher String. Beide folgenden Zeilen tun dasselbe:

@import url("theme.css");
@import "theme.css";

Wo die Regel stehen muss

@import ist nur ganz am Anfang eines Stylesheets gültig. Es muss vor jeder anderen Regel stehen, außer @charset und @layer (eine einfache @layer-Anweisung ohne Block). Wenn Sie @import nach einer normalen Regel wie einem Selektor-Block platzieren, ignoriert der Browser sie.

@charset "utf-8";   /* allowed first */
@import "reset.css"; /* imports must come before any styles */

body {
  margin: 0;
}

@import "late.css";  /* invalid — ignored, because a rule already appeared */

Info

@import kann nicht innerhalb bedingter Gruppen-At-Regeln wie @media oder @supports verwendet werden. Um ein Stylesheet nur unter bestimmten Bedingungen zu laden, fügen Sie die Bedingung an das @import selbst an (siehe Media Queries unten).

@import vs. das <link>-Element

Ein Stylesheet lässt sich auch aus HTML mit <link rel="stylesheet" href="theme.css"> einbinden. Beide Ansätze liefern dasselbe Ergebnis, unterscheiden sich jedoch in der Performance:

Ein <link>-Tag wird vom Browser beim Parsen des HTML entdeckt, sodass die Datei sofort und parallel zu anderen Ressourcen heruntergeladen werden kann.
Ein @import wird erst nach dem Herunterladen und Parsen des übergeordneten Stylesheets gefunden. Dies erzeugt eine Anfrage-Kette (HTML → main.css → imported.css), die das Rendering verzögern kann.

Für übergeordnete Stylesheets empfiehlt sich <link>. Verwenden Sie @import, wenn Sie gezielt eine Komposition auf CSS-Ebene wünschen — etwa beim Zusammenstellen eines einzelnen Bundles aus mehreren Partials oder beim Importieren eines Stylesheets in eine benannte Kaskaden-Ebene.

Initial Value	-
Applies to	-
Inherited	No.
Animatable	No.
Version	CSS2
DOM Syntax	N/A

Syntax

Syntax der CSS-@import-Regel

@import <url> | <string> [ <media-query-list> ]? ;

Beispiel der @import-Regel:

Beispiel der CSS-@import-Regel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      @import url('https://fonts.googleapis.com/css?family=Coiny');
      @import url('https://fonts.googleapis.com/css?family=Lobster');
      .p1 {
        font-family: 'Coiny', cursive;
      }
      .p2 {
        font-family: 'Lobster', cursive;
      }
    </style>
  </head>
  <body>
    <h2>@import at-rule example</h2>
    <p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
    <p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Der Unterschied zwischen relativer und absoluter URL

Die Datentypen <url> und <string> werden von der @import-Regel akzeptiert, um die zu importierende Datei anzugeben. Diese kann als absolute oder relative URL angegeben werden.

Das folgende Code-Beispiel verwendet eine relative URL. Das bedeutet, dass die URL relativ zum Speicherort des aktuellen Stylesheets ist. Hier muss kein Pfad angegeben werden — es reicht der Dateiname.

CSS-@import-Regel

@import "relative.css";

Im nächsten Beispiel ist die URL ebenfalls relativ, obwohl ein Pfad angegeben wurde:

CSS-@import-Regel

@import "../css/relative.css";

Das folgende Code-Beispiel enthält den vollständigen Pfad mit Domainname. Das bedeutet, dass die URL absolut ist.

CSS-@import-Regel

@import "http://www.examples.fr/css/absolute.css";

Media Queries

@import akzeptiert eine Media Query nach der URL, sodass das Stylesheet nur angewendet wird, wenn die Bedingung zutrifft. So macht man einen Import medienabhängig, ohne ihn in @media einzuschließen (was nicht erlaubt ist).

Das folgende Stylesheet wird nur geladen, wenn die Seite gedruckt wird:

@import "print.css" print;

Es kann jede beliebige Media Query verwendet werden, einschließlich Feature-Queries wie width:

@import "wide.css" screen and (min-width: 768px);

Der Browser lädt die Datei unabhängig von der Bedingung herunter — die Media Query entscheidet nur, ob die Regeln angewendet werden, nicht ob die Datei geladen wird.

Import in eine Kaskaden-Ebene

Eine moderne Funktion erlaubt es, ein importiertes Stylesheet mit layer() einer benannten Kaskaden-Ebene zuzuweisen. Alles in der importierten Datei nimmt dann an der Priorität dieser Ebene teil — eine saubere Möglichkeit, zu verhindern, dass CSS von Drittanbietern das eigene CSS überschreibt:

@import "bootstrap.css" layer(framework);

Ein Import kann auch mit einer Feature-Query über supports() abgesichert werden, sodass das Stylesheet nur geladen wird, wenn der Browser eine bestimmte Deklaration versteht:

@import "grid.css" supports(display: grid);

Werte

Wert	Beschreibung
url	Eine `<url>` oder ein `<string>`, der den Speicherort der zu importierenden Ressource angibt. Die URL kann relativ oder absolut sein.
string list-of-mediaqueries	Eine kommagetrennte Liste von Media Queries, die die Anwendung der im verlinkten URL definierten CSS-Regeln steuern.

Übungen

Übung

Was ist die korrekte Syntax zur Verwendung der @import-Regel in CSS?

@import url ('mystyle.css')import url ('mystyle.css')url ('mystyle.css') @import@import 'mystyle.css' @import: 'mystyle.css'