We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

@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);

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

構文

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

内容は次の通りです。

url
インポートするリソースの位置を表す <string> 又は <url> です。 URL は絶対パス相対パスでも構いません。なお、 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 の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり5.5 あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Guillaume-Heras, fscholz, ethertank, sosleepy, Marsf
最終更新者: mfuji09,