@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 durch Kommas getrennte Liste von Media-Queries, die die medienabhängigen Bedingungen zum Anwenden der in der verlinkten URL definierten CSS-Regeln festlegen. Unterstützt der Browser keine dieser Anfragen, 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 die Funktion(en) an, die der Browser unterstützen muss, damit das Stylesheet importiert wird. Wenn der Browser die in der supports-condition festgelegten Bedingungen nicht erfüllt, wird das verlinkte Stylesheet möglicherweise nicht abgerufen, und selbst 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 layer Schlüsselwort oder der layer() Funktion, um externe Stylesheets (wie von Frameworks, Widget-Stilblättern, Bibliotheken etc.) 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 erklärt 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.

Um zu vermeiden, dass Benutzeragenten Ressourcen für nicht unterstützte Medientypen abrufen, 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 von dem verwendeten Medium abhängig. Die Angabe von all für die list-of-media-queries hat den gleichen Effekt.

Ebenso können Benutzeragenten die supports()-Funktion in einer @import-Regel verwenden, um Ressourcen nur dann abzurufen, wenn eine bestimmte Funktionsmenge unterstützt wird (oder nicht). Dies ermöglicht es Autoren, neu eingeführte CSS-Funktionen zu nutzen und gleichzeitig für ältere Browser-Versionen angemessene Fallbacks bereitzustellen. 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 an der Stelle des Imports 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>  

<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 wahr 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("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 veranschaulichen, wie Sie ein Layout importieren können, das ein Raster verwendet, wenn display: grid unterstützt wird, und andernfalls CSS importieren, 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. Allerdings müssen Sie Parenthesen 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, diese nicht in zusätzliche Klammern eingeschlossen werden muss: dies wird im ersten Beispiel oben gezeigt.

Die obigen Beispiele zeigen Unterstützungsbedingungen unter Verwendung der grundlegenden Deklarationssyntax. Sie können auch CSS-Funktionen in supports() angeben, und sie wird zu true ausgewertet, wenn sie unterstützt werden und von dem Benutzeragenten ausgewertet werden können. Zum Beispiel zeigt der Code unten eine @import, die von beiden 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 separat. Eine Kaskadenschicht, die ohne einen Namen deklariert wird, ist eine unbenannte Kaskadenschicht. Unbenannte Kaskadenschichten werden bei der Erstellung abgeschlossen: sie bieten keine Möglichkeit zur Umordnung oder zum Hinzufügen von Stilen und können nicht von außerhalb referenziert werden.

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