@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;

wobei:

url

Ist ein <string> oder ein <url>-Typ, der den Ort 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 verlinkten URL definierten CSS-Regeln festlegen. Sollte der Browser keine dieser Abfragen unterstützen, wird die verlinkte Ressource nicht geladen.

layer-name

Ist der Name einer Kaskadenschicht, in die die Inhalte der verlinkten 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 die in der supports-condition angegebenen Bedingungen nicht erfüllt, kann er das verlinkte Stylesheet nicht abrufen, und selbst wenn es über einen anderen Weg heruntergeladen wird, wird es nicht geladen. Die Syntax von supports() ist fast identisch mit der, die in @supports beschrieben ist. 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 kommen, außer @charset-Regeln und Schichterstellungs-@layer-Anweisungen.

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

Da die @import-Regel nach den Stilen deklariert 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-@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 Imports geben durch Komma getrennte Media-Queries nach der URL an. Fehlt eine Media-Query, ist der Import nicht abhängig von dem verwendeten Medium. Die Angabe von all für die list-of-media-queries hat denselben Effekt.

Ebenso können User Agents die supports()-Funktion in einer @import-Regel verwenden, um Ressourcen nur dann abzurufen, wenn ein bestimmtes Funktionsset (oder nicht) unterstützt wird. Dies ermöglicht es Autoren, kürzlich eingeführte CSS-Funktionen zu nutzen und gleichzeitig sanfte 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 verknüpften Ressource importiert werden. Regeln können auch in eine vorhandene Kaskadenschicht importiert werden. Das layer-Schlüsselwort oder die layer()-Funktion wird dazu mit @import verwendet. Deklarationen in Stilregeln aus importierten Stylesheets interagieren mit der Kaskade, als wären sie unmittelbar an der Stelle des Imports im Stylesheet geschrieben.

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

Importieren von CSS-Regeln, 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 erfüllt sein müssen, bevor die verknüpften CSS-Regeln angewendet werden. So wird beispielsweise die letzte @import-Regel das landscape.css-Stylesheet nur auf einem Bildschirmgerät im Querformat laden.

Importieren von CSS-Regeln, abhängig von 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 zeigen, wie Sie ein Layout importieren, das ein Grid verwendet, wenn display: grid unterstützt wird, und andernfalls CSS, das display: flex verwendet. Während Sie nur eine supports()-Anweisung haben können, können Sie beliebig viele Funktionsprüfungen mit not, and und or kombinieren. Sie müssen jedoch Klammern verwenden, um die Rangfolge zu definieren, wenn Sie sie mischen, z. B. ist supports((..) or (..) and not (..)) ungültig, jedoch supports((..) or ((..) and (not (..)))) ist gültig. Beachten Sie, dass, wenn Sie nur eine einzelne Deklaration haben, Sie sie nicht in zusätzliche Klammern setzen müssen: Dies wird im ersten obigen Beispiel gezeigt.

Die obigen Beispiele zeigen Unterstützungskonditionen unter Verwendung der grundlegenden Deklarationssyntax. Sie können auch CSS-Funktionen in supports() angeben, und es wird zu true ausgewertet, wenn sie unterstützt und im User-Agent ausgewertet werden können. Zum Beispiel zeigt der unten stehende Code eine @import, die 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, die Regeln aus dem importierten Stylesheet theme enthält.

@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 separaten 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 sind abgeschlossen, wenn sie erstellt werden: Sie bieten keine Möglichkeit zur Neuanordnung oder Hinzufügung von Stilen und können nicht von außerhalb referenziert werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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