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

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 kommagetrennte Liste von Media Queries, die die medienabhängigen Bedingungen angeben, unter denen die CSS-Regeln aus der verlinkten URL angewendet werden sollen. Wenn der Browser keine dieser Queries unterstützt, wird die verlinkte Ressource nicht geladen.

layer-name

Ist der Name einer Kaskadenschicht, in die der Inhalt der verlinkten Ressource importiert wird.

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, wird das verlinkte Stylesheet möglicherweise nicht abgerufen und selbst wenn es auf anderem Weg heruntergeladen wird, wird es nicht geladen. Die Syntax von supports() ist fast identisch mit der in @supports beschriebenen, und dieses Thema kann als ausführlichere Referenz verwendet werden.

Verwenden Sie @import zusammen mit dem layer-Schlüsselwort oder der layer()-Funktion, um externe Stylesheets (von Frameworks, Widget-Stilkarten, Bibliotheken usw.) in Schichten zu importieren.

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

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

Da die @import-Regel nach den Stilen 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 bedingten Gruppenregeln 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 kommagetrennte Media Queries nach der URL. Bei Fehlen einer Media Query ist der Import nicht bedingt durch das verwendete Medium. Die Angabe von all für 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 Merkmalset (oder nicht) unterstützt wird. Dies ermöglicht es Autoren, kürzlich eingeführte CSS-Funktionen zu nutzen, während sie sanfte Rückfalle für ältere Browserversionen bieten. 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 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 ob sie buchstäblich zum Zeitpunkt des Imports in das Stylesheet geschrieben 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>  

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

<supports-decl> = 
  ( <declaration> )  

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

Die beiden obigen Beispiele zeigen, wie man die url als <string> und als url()-Funktion angibt.

@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. Beispielsweise wird die letzte @import-Regel das landscape.css-Stylesheet 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 zeigen, wie man ein Layout importieren könnte, das ein Raster verwendet, wenn display: grid unterstützt wird, und andernfalls CSS importiert, 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 Priorität zu definieren, wenn Sie sie mischen, z.B. supports((..) or (..) and not (..)) ist ungültig, aber supports((..) or ((..) and (not (..)))) ist gültig. Beachten Sie, dass, wenn Sie nur eine einzige Deklaration haben, diese nicht in zusätzliche Klammern eingeschlossen werden muss: dies wird im ersten obigen Beispiel gezeigt.

Die obigen Beispiele zeigen Support-Bedingungen unter Verwendung der einfachen Deklarationssyntax. Sie können auch CSS-Funktionen in supports() angeben und es wird auf true ausgewertet, wenn sie unterstützt werden und vom User-Agent ausgewertet werden können. Zum Beispiel zeigt der untenstehende Code ein @import, das bedingt von sowohl child combinators (selector()) als auch der font-tech()-Funktion 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 beinhalten.

@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 headings.css- und links.css-Stylesheets 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 namenlosen Kaskadenschichten und das Importieren der verlinkten Regeln in jede einzeln. Eine Kaskadenschicht, die ohne Namen erklärt wird, ist eine namenlose Kaskadenschicht. Namenlose Kaskadenschichten werden beim Erstellen abgeschlossen: sie bieten keine Möglichkeit zur Neuordnung oder zum Hinzufügen von Styles und können nicht von außen referenziert werden.

• @media
• @supports
• CSS-Kaskade und Vererbung-Modul