@import
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die @import
-CSS-At-Regel wird verwendet, um Stilregeln aus anderen gültigen Stylesheets zu importieren.
Eine @import
-Regel muss zu Beginn des Stylesheets definiert werden, vor allen anderen At-Regeln (mit Ausnahme von @charset und @layer) und Stil-Deklarationen. Andernfalls wird sie ignoriert.
Syntax
@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;
Dabei gilt:
- url
-
Ist ein
<string>
oder ein<url>
-Typ, der den Speicherort der zu importierenden Ressource darstellt. Die URL kann absolut oder relativ angegeben werden. - list-of-media-queries
-
Ist eine durch Kommata getrennte Liste von Media-Queries, die medienabhängige Bedingungen angibt, unter denen die CSS-Regeln der verlinkten URL angewendet werden. Unterstützt der Browser keine dieser Bedingungen, wird die verlinkte Ressource nicht geladen.
- layer-name
-
Ist der Name einer Cascade Layer, in die der Inhalt der verlinkten Ressource importiert wird.
- supports-condition
-
Gibt die Funktion(en) an, die der Browser unterstützen muss, damit das Stylesheet importiert wird. Falls der Browser nicht den in der supports-condition festgelegten Bedingungen entspricht, wird das verlinkte Stylesheet möglicherweise nicht abgerufen und selbst wenn es durch andere Wege heruntergeladen wird, nicht geladen. Die Syntax von
supports()
ist nahezu identisch mit der in@supports
beschriebenen und kann als umfassendere Referenz genutzt werden.
Verwenden Sie @import
zusammen mit dem layer
-Schlüsselwort oder der layer()
-Funktion, um externe Stylesheets (von Frameworks, Widget-Stylesheets, Bibliotheken usw.) in Ebenen zu importieren.
Beschreibung
Importierte Regeln müssen vor allen anderen Regeltypen stehen, mit Ausnahme von @charset
-Regeln und layererstellenden @layer
-Deklarationen.
* {
margin: 0;
padding: 0;
}
/* more styles */
@import url("my-imported-styles.css");
Da die @import
-At-Regel nach den Stilen deklariert wurde, ist sie ungültig und wird daher ignoriert.
@import url("my-imported-styles.css");
* {
margin: 0;
padding: 0;
}
/* more styles */
Die @import
-Regel ist keine verschachtelte Anweisung. Daher kann sie nicht innerhalb von bedingten Gruppen-At-Regeln verwendet werden.
Damit User Agents Ressourcen für nicht unterstützte Medientypen vermeiden können, können Autoren medienabhängige Importbedingungen angeben. Diese bedingten Importe definieren durch Kommata getrennte Media-Queries nach der URL. Fehlt eine Media-Query, ist der Import nicht an ein bestimmtes Medium gebunden. Das Spezifizieren von all
für die list-of-media-queries
hat denselben Effekt.
Ebenso können User Agents die supports()
-Funktion in einer @import
-At-Regel verwenden, um Ressourcen nur abzurufen, wenn eine bestimmte Funktionalität unterstützt wird oder nicht.
So können Autoren neue CSS-Funktionalitäten nutzen und gleichzeitig ältere Browser-Versionen durch sinnvolle Fallbacks unterstützen.
Beachten Sie, dass die Bedingungen in der supports()
-Funktion einer @import
-At-Regel in JavaScript über CSSImportRule.supportsText
abgerufen werden können.
Die @import
-Regel kann auch verwendet werden, um eine Cascade Layer zu erstellen, indem Regeln aus einer verlinkten Ressource importiert werden. Regeln können auch in eine bestehende Cascade Layer importiert werden. Das Schlüsselwort layer
oder die Funktion layer()
wird hierfür mit @import
verwendet. Deklarationen in Stilregeln aus importierten Stylesheets interagieren mit der Schichtung, als wären sie wörtlich an der Importstelle in das Stylesheet geschrieben.
Formale Syntax
@import =
@import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;
<url> =
<url()> |
<src()>
<layer-name> =
<ident> [ '.' <ident> ]*
<import-conditions> =
[ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
<supports-condition> =
not <supports-in-parens> |
<supports-in-parens> [ and <supports-in-parens> ]* |
<supports-in-parens> [ or <supports-in-parens> ]*
<supports-in-parens> =
( <supports-condition> ) |
<supports-feature> |
<general-enclosed>
<supports-feature> =
<supports-decl>
<supports-decl> =
( <declaration> )
Beispiele
CSS-Regeln importieren
@import "custom.css";
@import url("chrome://communicator/skin/");
Die beiden obigen Beispiele zeigen, wie die url als <string>
und als url()
-Funktion angegeben werden kann.
CSS-Regeln abhängig von Media-Queries importieren
@import url("fine-print.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
Die in den obigen Beispielen angeführten @import
-Regeln zeigen medienabhängige Bedingungen, die erfüllt sein müssen, bevor die verlinkten CSS-Regeln angewendet werden. So wird z. B. das letzte @import
die landscape.css
-Stylesheet-Datei nur auf einem Bildschirmgerät im Querformat laden.
CSS-Regeln abhängig von der Funktionsunterstützung importieren
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports((not (display: grid)) and (display: flex))
screen and (max-width: 400px);
Die oben gezeigten @import
-Regeln verdeutlichen, wie Sie ein Layout importieren können, das display: grid
verwendet, wenn dieses unterstützt wird, und andernfalls CSS importieren, das display: flex
verwendet.
Obwohl Sie nur eine einzelne supports()
-Anweisung haben können, können Sie eine beliebige Anzahl von Funktionsüberprüfungen mit not
, and
und or
kombinieren. Sie müssen jedoch Klammern verwenden, um die Reihenfolge zu definieren, wenn Sie diese kombinieren, z. B. ist supports((..) or (..) and not (..))
ungültig, aber supports((..) or ((..) and (not (..))))
gültig.
Beachten Sie, dass Sie, wenn Sie nur eine einzelne Deklaration haben, diese nicht in zusätzliche Klammern einschließen müssen: Dies wird im ersten obigen Beispiel gezeigt.
Die obigen Beispiele zeigen Unterstützungsbedingungen unter Verwendung der grundlegenden Deklarationssyntax.
Sie können auch CSS-Funktionen in supports()
angeben, und diese wird zu true
ausgewertet, wenn sie unterstützt werden und im User Agent ausgewertet werden können.
Zum Beispiel zeigt der folgende Code eine @import
, die von sowohl Kind-Kombinatoren (selector()
) als auch der font-tech()
-Funktion abhängig ist:
@import url("whatever.css")
supports((selector(h2 > p)) and (font-tech(color-COLRv1)));
CSS-Regeln in eine Cascade Layer importieren
@import "theme.css" layer(utilities);
Im obigen Beispiel wird eine Cascade Layer namens utilities
erstellt, die die Regeln aus dem importierten Stylesheet theme
enthalten wird.
@import url(headings.css) layer(default);
@import url(links.css) layer(default);
@layer default {
audio[controls] {
display: block;
}
}
Im obigen Beispiel wirken die Regeln in den Stylesheets headings.css
und links.css
innerhalb derselben Layer wie die Regel audio[controls]
.
@import "theme.css" layer();
@import "style.css" layer;
Dies ist ein Beispiel für das Erstellen von zwei separaten unbenannten Cascade Layers und das getrennte Importieren der verlinkten Regeln in jede von ihnen. Eine Cascade Layer, die ohne Namen deklariert wird, ist eine unbenannte Cascade Layer. Unbenannte Cascade Layers werden beim Erstellen abgeschlossen: Sie bieten keine Möglichkeit zur Neuanordnung oder zum Hinzufügen von Stilen und können nicht von außen referenziert werden.
Spezifikationen
Specification |
---|
CSS Cascading and Inheritance Level 5 # at-import |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@import | ||||||||||||
layer() | ||||||||||||
supports() as import condition |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- See implementation notes.