@import

@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 kommagetrennte Liste von Media-Queries, die die medienabhängigen Bedingungen für die Anwendung der in der verlinkten URL definierten CSS-Regeln angeben. Wenn der Browser keine dieser Queries unterstützt, lädt er die verlinkte Ressource nicht.

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 an, welche Funktion(en) der Browser unterstützen muss, damit das Stylesheet importiert wird. Wenn der Browser den in der supports-condition angegebenen Bedingungen nicht entspricht, ruft er das verlinkte Stylesheet möglicherweise nicht ab, und selbst wenn es durch einen anderen Pfad heruntergeladen wird, lädt er es nicht. 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 Schlüsselwort layer oder der Funktion layer(), um externe Stylesheets (von Frameworks, Widget-Stylesheets, Bibliotheken usw.) in Schichten zu importieren.

Importierte Regeln müssen vor allen anderen Regeltypen kommen, außer @charset-Regeln und layer-erzeugenden @layer-Statements.

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

Da die @import-Schlüsselregel nach den Styles deklariert wird, ist sie ungültig und wird daher ignoriert.

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

Die @import-Regel ist keine verschachtelte Anweisung. Daher kann sie nicht innerhalb von Bedingungsgruppen-Schlüsselregeln verwendet werden.

Damit Benutzeragenten Ressourcen für nicht unterstützte Medientypen vermeiden können, können Autoren medienabhängige Importbedingungen angeben. Diese bedingten Importe spezifizieren kommagetrennte Media-Queries nach der URL. In Ermangelung einer 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 Benutzeragenten die Funktion supports() in einer @import-Schlüsselregel verwenden, um Ressourcen nur dann abzurufen, wenn eine bestimmte Menge von Funktionen unterstützt wird (oder nicht unterstützt wird). Dies ermöglicht es Autoren, kürzlich eingeführte CSS-Funktionen zu nutzen, während sie elegante Fallbacks für ältere Browserversionen bieten. Beachten Sie, dass die Bedingungen in der Funktion supports() einer @import-Schlüsselregel 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 verlinkten Ressource importiert werden. Regeln können auch in eine vorhandene Kaskadenschicht importiert werden. Das Schlüsselwort layer oder die Funktion layer() wird zu diesem Zweck mit @import verwendet. Deklarationen in Stilregeln aus importierten Stylesheets interagieren mit der Kaskade, als ob sie an der Importstelle wörtlich in das Stylesheet geschrieben worden wären.

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

<url> = 
  <url()>  |
  <src()>  

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

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

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

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

<supports-decl> = 
  ( <declaration> )  

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

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

@import url("fine-print.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("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 verlinkten CSS-Regeln angewendet werden. So wird zum Beispiel die letzte @import-Regel das Stylesheet landscape.css nur auf einem Bildschirmgerät im Querformat laden.

@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports((not (display: grid)) and (display: flex))
  screen and (max-width: 400px);

Die obigen @import-Regeln veranschaulichen, wie Sie ein Layout importieren können, das ein Grid verwendet, wenn display: grid unterstützt wird, und ansonsten CSS importieren, das display: flex verwendet. Während Sie nur eine supports()-Anweisung haben können, können Sie jede Anzahl von Funktionsüberprüfungen mit not, and und or kombinieren. Sie müssen jedoch Klammern verwenden, um die Priorität zu definieren, wenn Sie diese kombinieren, z.B. ist supports((..) or (..) and not (..)) ungültig, aber supports((..) or ((..) and (not (..)))) ist gültig. Beachten Sie, dass wenn Sie nur eine einzelne Deklaration haben, diese nicht in zusätzliche Klammern eingeschlossen werden muss: 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 als true ausgewertet, wenn sie unterstützt werden und auf dem Benutzeragenten ausgewertet werden können. Zum Beispiel zeigt der folgende Code ein @import, das von Kindkombinatoren (selector()) und der font-tech()-Funktion abhängig ist:

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

@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 url(headings.css) layer(default);
@import url(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 verlinkten Regeln in jede einzeln. Eine Kaskadenschicht, die ohne Namen deklariert wird, ist eine unbenannte Kaskadenschicht. Unbenannte Kaskadenschichten sind beim Erstellen abgeschlossen: Sie bieten keine Möglichkeit, Styles neu anzuordnen oder hinzuzufügen, und sie können von außen nicht referenziert werden.

• @media
• @supports
• CSS-Kaskadierung und Vererbung-Modul
• CSS-Schlüsselregel-Funktionen