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

layer-name

Ist der Name einer Kaskadenschicht, 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 selbst wenn es über einen anderen Pfad heruntergeladen wird, wird es nicht geladen. Die Syntax von supports() ist nahezu identisch mit der, die in @supports beschrieben ist, 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 Schichtenerstellenden @layer-Anweisungen.

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

Da die @import-At-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 bedingten Gruppen-At-Regeln verwendet werden.

Damit Benutzeragenten das Abrufen von Ressourcen für nicht unterstützte Medientypen vermeiden können, können Autoren medienabhängige Importbedingungen spezifizieren. Diese bedingten Importe spezifizieren durch Kommas getrennte Media Queries nach der URL. In Abwesenheit einer Media Query ist der Import nicht an das verwendete Medium gebunden. Die Angabe von all für die list-of-media-queries hat denselben Effekt.

Ebenso können Benutzeragenten die supports()-Funktion in einer @import-At-Regel verwenden, um Ressourcen nur dann abzurufen, wenn ein bestimmter Funktionssatz (oder nicht) unterstützt wird. Dies ermöglicht es Autoren, von neu eingeführten CSS-Funktionen zu profitieren, während sie gleichzeitig anmutige Rückfallebenen für ältere Browserversionen bieten. Beachten Sie, dass die Bedingungen in der supports()-Funktion einer @import-At-Regel in JavaScript unter Verwendung von CSSImportRule.supportsText abgerufen werden können.

Die @import-Regel kann auch verwendet werden, um eine Kaskadenschicht zu erstellen, indem Regeln aus einer verknüpften Ressource importiert werden. Regeln können auch in eine vorhandene Kaskadenschicht importiert werden. Das Schlüsselwort layer oder die Funktion layer() wird für diesen Zweck mit @import verwendet. Deklarationen in Stilregeln aus importierten Stylesheets interagieren mit der Kaskade, als wären sie wörtlich an der Stelle des Imports in das Stylesheet geschrieben.

@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 wird.

@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 medienspezifische Bedingungen, die erfüllt sein müssen, bevor die verknüpften CSS-Regeln angewendet werden. Zum Beispiel wird 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önnten, das ein Raster verwenden, 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 Feature-Checks 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 einzelne Deklaration haben, Sie sie nicht in zusätzliche Klammern einschließen müssen: Dies wird im ersten obigen Beispiel gezeigt.

Die obigen Beispiele zeigen Unterstützungsbedingungen unter Verwendung der grundlegenden Deklarationssyntax. Sie können auch CSS-Funktionen in supports() angeben, und es wird zu true ausgewertet, wenn sie unterstützt werden und im Benutzeragenten ausgewertet werden können. Zum Beispiel zeigt der folgende Code eine @import, die 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 verknüpften Regeln in jede einzeln. Eine ohne Namen deklarierte Kaskadenschicht ist eine unbenannte Kaskadenschicht. Unbenannte Kaskadenschichten werden beim Erstellen finalisiert: Sie bieten keine Mittel zum Neuordnen oder Hinzufügen von Stilen und können von außen nicht referenziert werden.

• @media
• @supports
• CSS-Kaskadierung und Vererbung Modul
• CSS-At-Regel-Funktionen