@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 repräsentiert. Die URL kann absolut oder relativ sein.

list-of-media-queries

Ist eine kommagetrennte Liste von Media Queries, die die medienabhängigen Bedingungen für die Anwendung der im verknüpften URL definierten CSS-Regeln angeben. Wenn der Browser keine dieser Abfragen unterstützt, wird die verknüpfte Ressource nicht geladen.

layer-name

Ist der Name einer Kaskadenebene, in die die Inhalte der verknüpften Ressource importiert werden. Weitere Informationen finden Sie unter layer().

supports-condition

Gibt die Funktion(en) an, die der Browser unterstützen muss, damit das Stylesheet importiert wird. Wenn der Browser nicht die in der supports-condition angegebenen Bedingungen erfüllt, kann es sein, dass er das verknüpfte Stylesheet nicht abruft, und selbst wenn es auf einem anderen Weg heruntergeladen wird, wird es nicht geladen. Die Syntax von supports() ist fast identisch mit der in @supports beschriebenen und dieses Thema kann als umfassendere Referenz herangezogen 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, außer @charset-Regeln und ebenerstellenden @layer-Anweisungen.

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

Da die @import-At-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 das Abrufen von Ressourcen für nicht unterstützte Medientypen vermeiden können, können Autoren medienabhängige Importbedingungen festlegen. Diese bedingten Importe spezifizieren kommagetrennte Media Queries nach der URL. Fehlt eine Media Query, ist der Import nicht vom verwendeten Medium abhängig. Die Angabe von all für die list-of-media-queries hat den gleichen Effekt.

Ebenso können User Agents die supports()-Funktion in einer @import-At-Regel verwenden, um Ressourcen nur dann abzurufen, wenn ein bestimmter Funktionsumfang (oder nicht) unterstützt wird. Dies ermöglicht es Autoren, von kürzlich eingeführten CSS-Funktionen zu profitieren und gleichzeitig anmutige Rückfalllösungen für ältere Browserversionen bereitzustellen. Beachten Sie, dass die Bedingungen in der supports()-Funktion einer @import-At-Regel in JavaScript mit CSSImportRule.supportsText abgerufen werden können.

Die @import-Regel kann auch verwendet werden, um eine Kaskadenebene zu erstellen, indem Regeln aus einer verknüpften Ressource importiert werden. Regeln können auch in eine bestehende Kaskadenebene importiert werden. Das layer-Schlüsselwort oder die layer()-Funktion wird mit @import zu diesem Zweck verwendet. Deklarationen in Stilregeln aus importierten Stylesheets interagieren mit der Kaskade, als ob sie wörtlich 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

CSS-Regeln importieren

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

Die beiden Beispiele oben zeigen, wie der url als <string> und als url()-Funktion spezifiziert werden kann.

CSS-Regeln importieren, abhängig 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 wahr sein müssen, bevor die verknüpften CSS-Regeln angewendet werden. So wird zum Beispiel die letzte @import-Regel das landscape.css-Stylesheet nur auf einem Bildschirmgerät im Querformat laden.

CSS-Regeln importieren, abhängig von der Unterstützung von Funktionen

@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 @import-Regeln oben veranschaulichen, wie Sie ein Layout importieren können, das ein Raster verwendet, wenn display: grid unterstützt wird, und ansonsten CSS importieren, das display: flex verwendet. Obwohl 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 Vorrangigkeit festzulegen, wenn Sie sie mischen, z. B. ist supports((..) or (..) and not (..)) ungültig, aber supports((..) or ((..) and (not (..)))) ist gültig. Beachten Sie, dass Sie, wenn Sie nur eine einzige Deklaration haben, diese nicht in zusätzliche Klammern einfügen müssen: Dies wird im ersten Beispiel oben gezeigt.

Die Beispiele oben zeigen Support-Bedingungen unter Verwendung der grundlegenden Deklarationssyntax. Sie können auch CSS-Funktionen in supports() angeben, und sie wird true ergeben, wenn sie unterstützt und im User-Agent ausgewertet werden können. Zum Beispiel zeigt der folgende Code ein @import, das abhängig von sowohl Kind-Kombinatoren (selector()) als auch der font-tech()-Funktion ist:

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

CSS-Regeln in eine Kaskadenebene importieren

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

Im obigen Beispiel wird eine Kaskadenebene namens utilities erstellt und sie wird die 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 Ebene wie die audio[controls]-Regel.

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

Dies ist ein Beispiel für die Erstellung von zwei separaten unbenannten Kaskadenebenen und das Importieren der verknüpften Regeln in jede einzeln. Eine ohne Namen erklärte Kaskadenebene ist eine unbenannte Kaskadenebene. Unbenannte Kaskadenebenen werden bei der Erstellung abgeschlossen: Sie bieten keine Möglichkeit 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-Kaskadierung und -Vererbung Modul
• CSS-At-Regel-Funktionen