Ü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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung JaFirefox Vollständige Unterstützung JaIE Vollständige Unterstützung 5.5Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung JaOpera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja

Legende

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

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, Guillaume-Heras, mrstork, Sebastianz, fscholz, Michael2402
Zuletzt aktualisiert von: SJW,