@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 kommaseparierte Liste von Media Queries, die medienabhängige Bedingungen für die Anwendung der CSS-Regeln in der verknüpften URL 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. 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 es sein, dass er das verknüpfte Stylesheet nicht abruft, und selbst wenn es auf anderem Weg 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 layer-Schlüsselwort oder der layer()-Funktion, um externe Stylesheets (von Frameworks, Widget-Stylesheets, Bibliotheken usw.) in Ebenen zu importieren.

Importierte Regeln müssen vor allen anderen Regeltypen 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 At-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 Gruppen-At-Regeln 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 kommaseparierte 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 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 ein bestimmtes Funktionspaket (oder nicht) unterstützt wird. Dies ermöglicht es Autoren, neu 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-At-Regel mithilfe von JavaScript mit CSSImportRule.supportsText abgerufen werden können.

Die @import-Regel kann auch verwendet werden, um eine Kaskadenebene zu erstellen, indem Regeln von einer verknüpften Ressource importiert werden. Regeln können auch in eine vorhandene Kaskadenebene importiert werden. Das layer-Schlüsselwort oder die layer()-Funktion wird mit @import für diesen Zweck 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>  

<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 spezifiziert.

@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. So wird beispielsweise die letzte @import-Regel das landscape.css-Stylesheet nur auf einem Bildschirmgerät im Querformat laden.

@import url("grid.css") supports(display: grid) screen and (width <= 400px);
@import url("flex.css") supports((not (display: grid)) and (display: flex))
  screen and (width <= 400px);

Die obigen @import-Regeln illustrieren, wie Sie ein Layout importieren könnten, das ein Grid verwendet, wenn display: grid unterstützt wird, und ansonsten CSS importieren, das display: flex verwendet. Obwohl man nur eine supports()-Anweisung haben kann, kann man eine beliebige Anzahl von Funktionsüberprüfungen mit not, and und or kombinieren. Allerdings müssen Sie Klammern verwenden, um die Vorrangordnung 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 einzelne Deklaration haben, Sie sie nicht in zusätzliche Klammern einschließen müssen: dies wird im ersten Beispiel oben gezeigt.

Die obigen Beispiele zeigen Unterstützungsbedingungen unter Verwendung der Syntax für einfache Deklarationen. 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 bedingt sowohl von Kindkombinatoren (selector()) als auch von 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 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 das Erstellen von zwei separaten unbenannten Kaskadenebenen und das Importieren der verknüpften Regeln in jede einzeln. Eine Kaskadenebene, die ohne einen Namen deklariert wird, ist eine unbenannte Kaskadenebene. Unbenannte Kaskadenebenen werden bei der Erstellung endgültig: sie bieten keine Möglichkeit, Stile neu anzuordnen oder hinzuzufügen, und sie können von außen nicht referenziert werden.

• @media
• @supports
• Modul "CSS Kaskadierung und Vererbung"
• Funktionen der At-Regeln in CSS