@import
構文
css
@import url;
@import url list-of-media-queries;
@import url supports(supports-query);
@import url supports(supports-query) list-of-media-queries;
内容は次の通りです。
- url
-
インポートするリソースの位置を表す
<string>
またはurl()
です。 URL は絶対パス相対パスでも構いません。 - list-of-media-queries
-
リンクした URL で定義された CSS ルールの適用の条件を示す、メディアクエリーのカンマ区切りのリストです。ブラウザーがメディアクエリに対応していない場合、リンクされたリソースは読み込まれません。
- supports-query
-
<supports-condition>
または<declaration>
のどちらかです。
解説
ルールのインポートは、 @charset
を除く他のすべての種類のルールよりも先で行わなければなりません。 @import
ルールは入れ子になるステートメントではないので、 条件付きアットルールグループの中で使うことはできません。
ユーザーエージェントは未知のメディアタイプのリソースを受け取ることを拒否することができるので、特定のメディアに依存した @import
ルールを指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りのメディアクエリーで指定します。メディアクエリーがないと、インポートは無条件で行われます。メディアに all
を指定しても同じ効果になります。
形式文法
@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>
<general-enclosed> =
[ <function-token> <any-value>? ) ] |
[ ( <any-value>? ) ]
<supports-decl> =
( <declaration> )
例
CSS ルールをインポート
css
@import "custom.css";
@import url("chrome://communicator/skin/");
条件付きで CSS ルールをインポート
css
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
仕様書
Specification |
---|
CSS Cascading and Inheritance Level 5 # at-import |
ブラウザーの互換性
BCD tables only load in the browser