@import

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 getrennte Liste von Media Queries, die die medienabhängigen Bedingungen für die Anwendung der in der verknüpften URL definierten CSS-Regeln spezifizieren. Wenn der Browser keine dieser Abfragen unterstützt, lädt er die verknüpfte Ressource nicht.

layer-name

Ist der Name einer Kaskadenschicht, in die die Inhalte der verknüpften Ressource importiert werden. Siehe layer() für weitere Informationen.

supports-condition

Gibt die Funktion(en) an, die vom Browser unterstützt werden müssen, damit das Stylesheet importiert wird. Wenn der Browser die in der supports-condition festgelegten Bedingungen nicht erfüllt, kann es sein, dass er das verknüpfte Stylesheet nicht abruft, und selbst wenn es auf anderem Weg heruntergeladen wird, wird es nicht geladen. Die Syntax von supports() ist fast identisch mit der, die in @supports beschrieben wird, 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 (aus Frameworks, Widget-Stylesheets, Bibliotheken, etc.) in Schichten zu importieren.

Beschreibung

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

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

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

@import "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 spezifizieren durch Kommas getrennte Media Queries nach der URL. Ohne Media Query ist der Import nicht medienabhängig. Die Angabe von all für die list-of-media-queries hat denselben Effekt.

Ähnlich können User-Agents die Funktion supports() in einer @import-Regel verwenden, um Ressourcen nur dann abzurufen, wenn eine bestimmte Funktionsmenge (oder nicht) unterstützt wird. Dies ermöglicht es Autoren, kürzlich eingeführte CSS-Funktionen zu nutzen, während sie gleichzeitig gütige Fallbacks für ältere Browserversionen bereitstellen. Beachten Sie, dass die Bedingungen in der supports()-Funktion einer @import-Regel in JavaScript mit CSSImportRule.supportsText abgerufen werden können.

Die @import-Regel kann auch verwendet werden, um eine Kaskadenschicht zu erstellen, indem Regeln aus einer verknüpften Ressource importiert werden. Regeln können auch in eine bestehende Kaskadenschicht importiert werden. Das layer-Schlüsselwort oder die layer()-Funktion wird dafür zusammen mit @import verwendet. Deklarationen in den Stilregeln aus importierten Stylesheets interagieren mit der Kaskade, als ob sie buchstäblich an der Stelle des Imports 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> | <supports-condition-name> ] ) 

<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 die url als <string> und als url()-Funktion angegeben wird.

Importieren von CSS-Regeln unter Bedingungen von 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 medienabhängige Bedingungen, die erfüllt sein müssen, bevor die verknüpften CSS-Regeln angewendet werden. So lädt z. B. die letzte @import-Regel das Stylesheet landscape.css nur auf einem Bildschirmgerät im Querformat.

Importieren von CSS-Regeln unter Bedingungen der Feature-Unterstü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 man ein Layout importieren könnte, das ein Grid verwendet, wenn display: grid unterstützt wird, und andernfalls CSS importiert, das display: flex verwendet. Während man nur eine supports()-Anweisung haben kann, kann man beliebig viele Funktionsprüfungen mit not, and und or kombinieren. Man muss jedoch Klammern verwenden, um die Reihenfolge zu definieren, wenn man diese mischt, z.B., supports((..) or (..) and not (..)) ist ungültig, aber supports((..) or ((..) and (not (..)))) ist gültig. Beachten Sie, dass wenn man nur eine einzelne Deklaration hat, diese nicht in zusätzliche Klammern eingefasst werden muss: dies wird im ersten obigen Beispiel gezeigt.

Die obigen Beispiele zeigen Unterstützungsbedingungen mit grundlegender Deklarationssyntax. Man kann auch CSS-Funktionen in supports() angeben, und es wird true ergeben, wenn sie unterstützt und auf dem User-Agent ausgewertet werden können. Zum Beispiel zeigt der untenstehende Code ein @import, das davon abhängt, dass sowohl Kind-Kombinatoren (selector()) als auch die font-tech()-Funktion:

@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 die Erstellung von zwei getrennten unbenannten Kaskadenschichten und das Importieren der verknüpften Regeln in jede einzeln. Eine Kaskadenschicht, die ohne Namen deklariert wird, ist eine unbenannte Kaskadenschicht. Unbenannte Kaskadenschichten werden bei der Erstellung abgeschlossen: Sie bieten keine Mittel zur Neuordnung oder zum Hinzufügen von Stilen und können nicht von außen referenziert werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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