@import

Übersicht

Die @import CSS @-Regel wird verwendet, um Stilregeln anderer Stylesheets zu importieren. Diese Regeln müssen allen anderen Typen von Regeln vorangehen außer @charset Regeln; da sie kein verschachteltes Statement ist, kann @import nicht innerhalb bedingter Gruppen-@-Regeln verwendet werden.

Damit User Agents verhindern können, Ressourcen für nicht unterstützte Medientypen zu holen, können Autoren medienabhängige @import Regeln definieren. Diese bedingten Importe definieren kommaseparierte Media Queries nach dem URI. Falls keine Media Query angegeben wurde, ist der Import unbedingt. Die Angabe von all für das Medium hat denselben Effekt.

Syntax

@import url;
@import url list-of-media-queries;

wobei:

url
Ist ein <string> oder ein <uri>, der die Adresse der zu importierenden Ressource repräsentiert. Der URL kann absolut oder relativ sein. Beachte, dass der URL nicht unbedingt eine Datei referenzieren muss; er kann auch nur den Packagenamen und -teil angeben und die passende Datei wird automatisch ausgewählt (z. B. chrome://communicator/skin/). Siehe hier für mehr Informationen.
list-of-media-queries
Ist eine kommaseparierte Liste von Media Queries, die die Anwendung der in dem verlinkten URL definierten CSS Regeln bedingt. Falls der Browser keine dieser Media Queries unterstützt, lädt er die verlinkte Ressource nicht.

Formale Syntax

@import [ <string> | <url> ] [ <media-query-list> ]?;

wobei
<media-query-list> = <media-query>#

wobei
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

wobei
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

wobei
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

wobei
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

wobei
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

wobei
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

Beispiele

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

Spezifikationen

Spezifikation Status Kommentar
Media Queries
Die Definition von '@import' in dieser Spezifikation.
Empfehlung Erweitert die Syntax zur Unterstützung beliebiger Media Queries und nicht nur einfache Medientypen.
CSS Level 2 (Revision 1)
Die Definition von '@import' in dieser Spezifikation.
Empfehlung Fügt Unterstützung für <string> hinzu, um den URL eines Stylesheets anzugeben,
und Voraussetzung dafür, die @import Regel am Anfang des CSS Dokuments anzugeben.
CSS Level 1
Die Definition von '@import' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
@importChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 5.5Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung