@import

Die @import CSS at-rule wird verwendet, um Stilregeln aus anderen gültigen Stylesheets zu importieren. Eine @import-Regel muss am Anfang des Stylesheets definiert werden, vor jeder anderen At-Regel (außer @charset und @layer) und Stildeklarationen, da sie sonst ignoriert wird.

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;

wo:

url

Ist ein <string> oder ein <url>-Typ, der den Speicherort der zu importierenden Ressource darstellt. Die URL kann absolut oder relativ sein.

list-of-media-queries

Ist eine durch Kommas separierte Liste von Media Queries, die die medienspezifischen Bedingungen für die Anwendung der CSS-Regeln in der verlinkten URL angeben. Wenn der Browser keine dieser Abfragen unterstützt, lädt er die verlinkte Ressource nicht.

layer-name

Ist der Name einer Kaskadenschicht, in die der Inhalt der verlinkten Ressource importiert wird. Siehe layer() für weitere Informationen.

supports-condition

Gibt die Funktion(en) an, die der Browser unterstützen muss, damit das Stylesheet importiert wird. Wenn der Browser die im supports-condition angegebenen Bedingungen nicht erfüllt, kann es sein, dass er das verlinkte Stylesheet nicht abruft und selbst wenn es auf anderem Wege heruntergeladen wird, es nicht geladen wird. Die Syntax von supports() ist fast identisch mit der in @supports beschriebenen, und dieses Thema kann als umfassendere Referenz verwendet werden.

Verwenden Sie @import zusammen mit dem layer-Schlüsselwort oder der layer()-Funktion, um externe Stylesheets (von Frameworks, Widget-Stylesheets, Bibliotheken usw.) in Schichten zu importieren.

Beschreibung

Importierte Regeln müssen vor allen anderen Regeltypen stehen, außer @charset-Regeln und schichterzeugenden @layer-Anweisungen.

* {
 margin: 0;
 padding: 0;
}
/* more styles */
@import "my-imported-styles.css";

Da die @import-Regel nach den Stilen deklariert ist, ist sie ungültig und wird daher ignoriert.

@import "my-imported-styles.css";
* {
 margin: 0;
 padding: 0;
}
/* more styles */

Die @import-Regel ist keine geschachtelte Anweisung. Daher kann sie nicht innerhalb von Bedingungsgruppen-At-Regeln verwendet werden.

Damit User Agents Ressourcen für nicht unterstützte Medientypen vermeiden können, können Autoren medienspezifische Importbedingungen angeben. Diese bedingten Importe spezifizieren kommaseparierte Media Queries nach der URL. Ohne eine Media Query ist der Import nicht bedingt durch das verwendete Medium. Die Angabe von all für die list-of-media-queries hat denselben Effekt.

Ähnlich können User Agents die supports()-Funktion in einer @import-Regel verwenden, um nur Ressourcen zu laden, wenn ein bestimmter Funktionssatz unterstützt wird (oder nicht). Dies ermöglicht es Autoren, kürzlich eingeführte CSS-Funktionen zu nutzen und gleichzeitig ansprechende Fallbacks für ältere Browserversionen bereitzustellen. Beachten Sie, dass die Bedingungen in der supports()-Funktion einer @import-Regel in JavaScript mit CSSImportRule.supportsText ermittelt werden können.

Die @import-Regel kann auch verwendet werden, um eine Kaskadenschicht zu erstellen, indem Regeln aus einer verlinkten Ressource importiert werden. Regeln können auch in eine bestehende Kaskadenschicht importiert werden. Das layer-Schlüsselwort oder die layer()-Funktion wird zu diesem Zweck mit @import verwendet. Deklarationen in Stilregeln aus importierten Stylesheets interagieren mit der Kaskade, als ob sie buchstäblich an der Importstelle in das Stylesheet geschrieben worden wären.

Formale Syntax

@import = 
 @import [ <url> | <string> ] [ layer | layer( <layer-name> ) ] ? <import-conditions> ; 

<layer-name> = 
 <ident> [ '.' <ident> ] * 

<import-conditions> = 
 [ supports( [ <supports-condition> | <declaration> ] ) ] ? <media-query-list> ? 

<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-selector-fn> | 
 <supports-font-tech-fn> | 
 <supports-font-format-fn> | 
 <supports-at-rule-fn> | 
 <supports-decl> 

<general-enclosed> = 
 [ <function-token> <any-value> ? ) ] | 
 [ ( <any-value> ? ) ] 

<supports-selector-fn> = 
 selector( <complex-selector> ) 

<supports-font-tech-fn> = 
 font-tech( <font-tech> ) 

<supports-font-format-fn> = 
 font-format( <font-format> ) 

<supports-at-rule-fn> = 
 at-rule( <at-keyword-token> ) 

<supports-decl> = 
 ( <declaration> ) 

<complex-selector> = 
 <complex-selector-unit> [ <combinator>? <complex-selector-unit> ] * 

<font-tech> = 
 <font-features-tech> | 
 <color-font-tech> | 
 variations | 
 palettes | 
 incremental 

<font-format> = 
 <string> | 
 collection | 
 embedded-opentype | 
 opentype | 
 svg | 
 truetype | 
 woff | 
 woff2 

<complex-selector-unit> = 
 [ <compound-selector>? <pseudo-compound-selector>* ]! 

<combinator> = 
 '>' | 
 '+' | 
 '~' | 
 [ '|' '|' ] 

<font-features-tech> = 
 features-opentype | 
 features-aat | 
 features-graphite 

<color-font-tech> = 
 color-COLRv0 | 
 color-COLRv1 | 
 color-SVG | 
 color-sbix | 
 color-CBDT 

<compound-selector> = 
 [ <type-selector>? <subclass-selector>* ]! 

<pseudo-compound-selector> = 
 <pseudo-element-selector> <pseudo-class-selector>* 

<type-selector> = 
 <wq-name> | 
 <ns-prefix>? '*' 

<subclass-selector> = 
 <id-selector> | 
 <class-selector> | 
 <attribute-selector> | 
 <pseudo-class-selector> 

<pseudo-element-selector> = 
 : <pseudo-class-selector> | 
 <legacy-pseudo-element-selector> 

<pseudo-class-selector> = 
 : <ident-token> | 
 : <function-token> <any-value> ) 

<wq-name> = 
 <ns-prefix>? <ident-token> 

<ns-prefix> = 
 [ <ident-token> | '*' ] ? '|' 

<id-selector> = 
 <hash-token> 

<class-selector> = 
 '.' <ident-token> 

<attribute-selector> = 
 '[' <wq-name> ']' | 
 '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']' 

<legacy-pseudo-element-selector> = 
 : [ before | after | first-line | first-letter ] 

<attr-matcher> = 
 [ '~' | '|' | '^' | '$' | '*' ] ? '=' 

<attr-modifier> = 
 i | 
 s 

Beispiele

Importieren von CSS-Regeln

@import "custom.css";
@import url("chrome://communicator/skin/");

Die beiden obigen Beispiele zeigen, wie man die url als <string> und als url()-Funktion angibt.

Importieren von CSS-Regeln, bedingt durch Media Queries

@import "fine-print.css" print;
@import "bluish.css" print, screen;
@import "common.css" screen;
@import "landscape.css" screen and (orientation: landscape);

Die @import-Regeln in den obigen Beispielen zeigen medienspezifische Bedingungen, die erfüllt sein müssen, bevor die verlinkten CSS-Regeln angewendet werden. So wird zum Beispiel die letzte @import-Regel das landscape.css Stylesheet nur auf einem Bildschirmgerät in Querformat laden.

Importieren von CSS-Regeln, bedingt durch Funktionsunterstützung

@import "grid.css" supports(display: grid) screen and (width <= 400px);
@import "flex.css" supports((not (display: grid)) and (display: flex)) screen
 and (width <= 400px);

Die obigen @import-Regeln veranschaulichen, wie Sie ein Layout importieren können, das ein Raster verwendet, wenn display: grid unterstützt wird, und alternativ CSS importieren, das display: flex verwendet. Während Sie nur eine supports()-Anweisung haben können, können Sie eine beliebige Anzahl von Funktionsprüfungen mit not, and und or kombinieren. Sie müssen jedoch Klammern verwenden, um die Priorität beim Mischen zu definieren, z. B. supports((..) or (..) and not (..)) ist ungültig, aber supports((..) or ((..) and (not (..)))) ist gültig. Beachten Sie, wenn Sie nur eine einzelne Deklaration haben, müssen Sie sie nicht in zusätzliche Klammern setzen: Dies wird im ersten obigen Beispiel gezeigt.

Die obigen Beispiele zeigen Unterstützungsbedingungen mit einfacher Deklarationssyntax. Sie können auch CSS-Funktionen in supports() angeben, und es wird true ergeben, wenn sie unterstützt werden und auf dem User-Agent ausgewertet werden können. Zum Beispiel zeigt der folgende Code ein @import, das sowohl von Kindkombinatoren (selector()) als auch von der font-tech()-Funktion abhängig ist:

@import "whatever.css"
 supports((selector(h2 > p)) and (font-tech(color-COLRv1)));

Importieren von CSS-Regeln in eine Kaskadenschicht

@import "theme.css" layer(utilities);

Im obigen Beispiel wird eine Kaskadenschicht namens utilities erstellt und sie wird Regeln aus dem importierten Stylesheet theme enthalten.

@import "headings.css" layer(default);
@import "links.css" layer(default);
@layer default {
 audio[controls] {
 display: block;
 }
}

Im obigen Beispiel kaskadieren die Regeln in den Stylesheets headings.css und links.css innerhalb derselben Schicht wie die audio[controls]-Regel.

@import "theme.css" layer();
@import "style.css" layer;

Dies ist ein Beispiel für das Erstellen zweier separater unbenannter Kaskadenschichten und das Importieren der verlinkten Regeln jeweils einzeln. Eine Kaskadenschicht ohne Namen ist eine unbenannte Kaskadenschicht. Unbenannte Kaskadenschichten sind finalisiert, sobald sie erstellt sind: Sie bieten keine Möglichkeit, Stile neu zu ordnen oder hinzuzufügen und können nicht von außen referenziert werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @media
• @supports
• CSS-Kaskadierung und Vererbung Modul
• CSS-At-Regel-Funktionen