@import

CSS@import @-規則 は、他のスタイルシートから @charset を除いたスタイル規則をインポートするために使用します。これは入れ子になるステートメントではないので、 @import条件付き @-規則グループの中で使うことはできません。

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

ユーザーエージェントは未知のメディアタイプのリソースを受け取ることを拒否することができるので、特定のメディアに依存した @import 規則を指定することができます。これらの条件付きインポートは、 URL の後でコンマ区切りのメディアクエリで指定します。メディアクエリがないと、インポートは無条件で行われます。メディアに all を指定しても同じ効果になります。

構文

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

内容は次の通りです。

url
インポートするリソースの位置を表す <string> 又は <url> です。 URL は絶対パス相対パスでも構いません。なお、 Mozilla パッケージでは URL はファイルを指定する必要はありません。パッケージ名やその一部で指定すると、自動的に適切なファイルが選択されます (例 chrome://communicator/skin/)。詳しくはこちらをご覧ください
list-of-media-queries
リンクした URL で定義された CSS 規則の適用の条件を示す、メディアクエリのコンマ区切りのリストです。ブラウザーがメディアクエリに対応していない場合、リンクされたリソースは読み込まれません。

形式文法

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

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

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

where
<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>

where
<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>

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

where
<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>

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

仕様書

仕様書 状態 備考
CSS Cascading and Inheritance Level 3
@import の定義
勧告候補  
Media Queries
@import の定義
勧告 単純な メディアタイプ だけでなく、いかなるメディアクエリもサポートするよう構文拡張
CSS Level 2 (Revision 1)
@import の定義
勧告 スタイルシートの URL の記述する <string> のサポートを追加し、
@import ルールを CSS 文書の最初に入れることを条件化
CSS Level 1
@import の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@importChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5.5Opera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応