@import CSS at-rule

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 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 mediaabhängige Bedingungen für die Anwendung der in der verlinkten URL definierten CSS-Regeln spezifiziert. Wenn der Browser keine dieser Abfragen unterstützt, wird die verlinkte Ressource nicht geladen.

layer-name

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

supports-condition

Gibt die Funktion(en) an, die der Browser unterstützen muss, damit das Stylesheet importiert wird. Wenn der Browser nicht den in der supports-condition angegebenen Bedingungen entspricht, kann es das verlinkte Stylesheet nicht abrufen und wird es, selbst wenn es über einen anderen Weg heruntergeladen wurde, nicht laden. Die Syntax von supports() ist fast identisch mit der, die in @supports beschrieben ist, 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 kommen, außer bei @charset-Regeln und schichtenerstellenden @layer-Anweisungen.

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

Da die @import-At-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 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 mediaabhängige Importbedingungen angeben. Diese bedingten Importe spezifizieren durch Kommas getrennte Media Queries nach der URL. In Abwesenheit einer Media Query ist der Import nicht vom verwendeten Medium abhängig. 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-At-Regel verwenden, um Ressourcen nur dann abzurufen, wenn eine bestimmte Funktionsmenge unterstützt wird (oder nicht). Dies ermöglicht es den Autoren, von kürzlich eingeführten CSS-Funktionen zu profitieren, während sie gleichzeitig reibungslose Fallbacks für ältere Browserversionen bieten. Beachten Sie, dass die Bedingungen in der supports()-Funktion einer @import-At-Regel in JavaScript mittels CSSImportRule.supportsText abgerufen 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 wären sie buchstäblich an der Stelle der Importierung in das Stylesheet geschrieben.

Formale Syntax

@import = 
  @import [ <url> | <string> ] [ [ layer | layer( <layer-name> ) ] || [ scope | scope( <scope-start> | <scope-boundaries> ) ] || <supports-import-condition> ]? <media-import-condition> ;  

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

<scope-start> = 
  <selector-list>  

<scope-boundaries> = 
  [ [ ( <scope-start> ) ]? [ to ( <scope-end> ) ]? ]!  

<supports-import-condition> = 
  supports( [ <supports-condition> | <declaration> ] )  

<media-import-condition> = 
  <media-query-list>  

<selector-list> = 
  <complex-selector-list>  

<scope-end> = 
  <selector-list>  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<complex-selector-list> = 
  <complex-selector>#  

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

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

<supports-feature> = 
  <supports-selector-fn>       |
  <supports-font-tech-fn>      |
  <supports-font-format-fn>    |
  <supports-at-rule-fn>        |
  <supports-named-feature-fn>  |
  <supports-env-fn>            |
  <supports-decl>              

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

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

<combinator> = 
  '>'                |
  '+'                |
  '~'                |
  [ '|' '|' ]        |
  [ / <wq-name> / ]  

<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-named-feature-fn> = 
  named-feature( <ident> )  

<supports-env-fn> = 
  env( <ident> )  

<supports-decl> = 
  ( [ <declaration> | <supports-condition-name> ] )  

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

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

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

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

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

<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> )  

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

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

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

<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/communicator.css");

Die beiden obigen Beispiele zeigen, wie Sie die url als <string> und als url()-Funktion angeben können.

Importieren von CSS-Regeln, die von Media Queries abhängen

@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 mediaabhängige Bedingungen, die erfüllt sein müssen, bevor die verlinkten CSS-Regeln angewendet werden. Zum Beispiel wird die letzte @import-Regel das landscape.css-Stylesheet nur auf einem Bildschirmgerät im Querformat laden.

Importieren von CSS-Regeln, die von Feature-Support abhängen

@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önnten, das ein Raster verwendet, wenn display: grid unterstützt wird, und ansonsten CSS importiert, das display: flex verwendet. Während Sie nur eine supports()-Anweisung haben können, können Sie eine beliebige Anzahl von Feature-Prüfungen mit not, and und or kombinieren. Sie müssen jedoch Klammern verwenden, um die Priorität zu definieren, 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 einzelne Deklaration haben, diese nicht in zusätzliche Klammern einschließen müssen: Dies wird im ersten Beispiel oben gezeigt.

Die obigen Beispiele zeigen Support-Bedingungen mit grundlegender Deklarationssyntax. Sie können auch CSS-Funktionen in supports() angeben, und es wird zu true ausgewertet, wenn sie unterstützt werden und auf dem User-Agent ausgewertet werden können. Zum Beispiel zeigt der folgende Code ein @import, das von sowohl Nachkommenkombinatoren (selector()) als auch 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 mit dem Namen utilities erstellt, die Regeln aus dem importierten Stylesheet theme enthalten wird.

@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 Regel audio[controls].

@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 verlinkten Regeln in jede dieser Schichten. Eine Kaskadenschicht, die ohne Namen deklariert wird, ist eine unbenannte Kaskadenschicht. Unbenannte Kaskadenschichten werden beim Erstellen abgeschlossen: Sie bieten keine Möglichkeit zum Umordnen oder Hinzufügen von Stilen und sie 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