@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 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 in der verknüpften URL definierten CSS-Regeln angeben. Wenn der Browser keine dieser Abfragen unterstützt, lädt er die verknüpfte Ressource nicht.

layer-name

Ist der Name einer Kaskadenebene, in die die Inhalte der verknüpften Ressource importiert werden.

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 sein, dass er das verknüpfte Stylesheet nicht abruft und auch wenn es über einen anderen Pfad heruntergeladen wird, wird es nicht geladen. 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 (aus Frameworks, Widget-Stylesheets, Bibliotheken usw.) in Ebenen zu importieren.

Importierte Regeln müssen vor allen anderen Regelarten stehen, außer @charset Regeln und @layer Anweisungen zur Erstellung von Ebenen.

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

Da die @import-Regel nach den Stilen deklariert ist, 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 at-rules bedingter Gruppen verwendet werden.

Damit User Agents das Abrufen von 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 Abwesenheit einer Media Query ist der Import nicht bedingt von den verwendeten Medien. Die Angabe von all für list-of-media-queries hat denselben Effekt.

Ähnlich können User Agents die supports()-Funktion in einer @import-Regel verwenden, um Ressourcen nur abzurufen, wenn ein bestimmter Funktionssatz (oder nicht) unterstützt wird. Dadurch können Autoren neu eingeführte CSS-Funktionen nutzen, während sie gleichzeitig elegante Fallbacks für ältere Browserversionen bereitstellen. Beachten Sie, dass die Bedingungen in der supports()-Funktion einer @import-Regel in JavaScript mit CSSImportRule.supportsText erhalten 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 zu diesem Zweck mit @import 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 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 die 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 verknüpften CSS-Regeln angewendet werden. Zum Beispiel 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 veranschaulichen, wie man ein Layout importieren könnte, 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 Funktionsprüfungen mit not, and und or kombinieren. Sie müssen jedoch Klammern verwenden, um die Priorität zu definieren, wenn Sie diese 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 einzelne Deklaration haben, Sie diese nicht in zusätzliche Klammern einschließen müssen: dies wird im ersten obigen Beispiel gezeigt.

Die obigen Beispiele zeigen Unterstützungsbedingungen unter Verwendung grundlegender Deklarationssyntax. Sie können auch CSS-Funktionen in supports() angeben, und es wird zu true ausgewertet, wenn sie unterstützt werden und im User-Agent ausgewertet werden können. Zum Beispiel zeigt der folgende Code ein @import, das sowohl auf Kindkombinatoren (selector()) als auch auf die font-tech() Funktion bedingt ist:

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

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

Im obigen Beispiel wird eine Kaskadenebene 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 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 den Import der verknüpften Regeln in jede separat. Eine ohne Namen deklarierte Kaskadenebene ist eine unbenannte Kaskadenebene. Unbenannte Kaskadenebenen werden beim Erstellen finalisiert: sie bieten keine Möglichkeit zum Umordnen oder Hinzufügen von Stilen und können nicht von außerhalb referenziert werden.

• @media
• @supports
• Modul für CSS-Kaskadierung und Vererbung module