@import
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
@import
は CSS のアットルールで、スタイルルールを他の有効なスタイルシートからインポートするために使用します。
@import
ルールはスタイルシートの最上位で、他のアットルール(@charset や @layer)やスタイル宣言の前に定義する必要があり、そうしなければ無視されます。
構文
@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;
内容は次の通りです。
- url
-
インポートするリソースの位置を表す
<string>
、<url>
、<url>
のいずれかです。 URL は絶対パスでも相対パスでも構いません。 - list-of-media-queries
-
メディアクエリーのカンマ区切りのリストで、リンクした URL で定義された CSS ルールを適用するためのメディアに依存した条件を指定します。ブラウザーが対応していないメディアクエリーの場合、リンクされたリソースは読み込まれません。
- layer-name
-
リンクされたリソースのコンテンツがインポートされるカスケードレイヤーの名前です。
- supports-condition Experimental
-
このスタイルシートをインポートするために、ブラウザーが対応している必要がある特性を示します。 ブラウザーが supports-condition で指定された条件に適合しない場合、リンクされたスタイルシートを取得しないことがあり、他にもパスを通してダウンロードしても読み込むことはできません。
supports()
の構文は@supports
で記述されているものとほぼ同じですので、より完全なリファレンスはそちらのトピックを参照してください。
解説
ルールのインポートは、 @charset
ルールと @layer
文を作成するレイヤーを除き、他のすべての種類のルールよりも前に来る必要があります。
* {
margin: 0;
padding: 0;
}
/* それ以外のスタイル */
@import url("my-imported-styles.css");
@import
アットルールはスタイル設定の後に宣言されており、不正であるため無視されます。
@import url("my-imported-styles.css");
* {
margin: 0;
padding: 0;
}
/* more styles */
@import
ルールは入れ子になる文ではありません。従って、条件付きアットルールグループの中で使うことはできません。
ユーザーエージェントは未知のメディア種別のリソースを受け取ることを拒否することができるので、特定のメディアに依存した @import
ルールを指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りのメディアクエリーで指定します。メディアクエリーがないと、インポートは無条件で行われます。メディアに all
を指定しても同じ効果になります。
同様に、ユーザーエージェントは @import
アットルールで supports()
関数を使用して、具体的な特性の集合に対応している(または対応していない)場合のみリソースを取得することができます。
これにより、作者は最近導入された CSS 特性の利点を活かしつつ、古いバージョンのブラウザーに対して優雅なフォールバックを提供することができます。
なお、 @import
アットルールの supports()
関数の条件は、 JavaScript で CSSImportRule.supportsText
を用いて取得することができます。
@import
ルールにより、リンクされたリソースからルールをインポートしてカスケードレイヤーを作成することもできます。ルールは既存のカスケードレイヤーにインポートすることもできます。そのために @import
とともに layer
キーワードまたは layer()
関数を使用します。インポートされたスタイルシートのスタイルルールの宣言は、インポートされた時点でスタイルシートに文字どおり書き込まれたかのようにカスケードに作用します。
形式文法
@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 ルールをインポート
@import "custom.css";
@import url("chrome://communicator/skin/");
上の 2 つの例では、 url を <string>
として指定する方法と url()
関数として指定する方法を示しています。
条件付きで CSS ルールをインポート
@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
上記の例の @import
ルールは、リンクされた CSS ルールが適用される前に成立する必要があるメディア依存の条件を示しています。たとえば、最後の @import
ルールは、横向きの画面の場合のみ landscape.css
スタイルシートを読み込ませます。
機能に対応していることを条件とした CSS ルールのインポート
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports(not (display: grid) and (display: flex))
screen and (max-width: 400px);
上記の @import
ルールは、display: grid
が対応している場合はグリッドを使用するレイアウトをインポートし、そうでない場合は display: flex
を使用する CSS をインポートする方法を示しています。
supports()
文は 1 つしか置くことができませんが、not
、and
、or
を使った特性チェックは、調べる条件を括弧でくくればいくつでも組み合わせることができます。
括弧を使用して優先順位を示すこともできます。
なお、もし単一の宣言しかない場合は、括弧でくくる必要はありません。これは上の最初の例で示されています。
上記の例では、単純な宣言構文を使って対応条件を示しています。
supports()
で CSS 関数を指定することもでき、対応していてユーザーエージェントで評価できる場合は true
と評価されます。
例えば、下記のコードでは、子結合子 (selector()
) と font-tech()
関数の両方を条件とする @import
を表示しています。
@import url("whatever.css")
supports((selector(h2 > p)) and (font-tech(color-COLRv1)));
カスケードレイヤーへのCSSルールのインポート
@import "theme.css" layer(utilities);
上の例では、 utilities
という名前のカスケードレイヤーが作成され、インポートされたスタイルシート theme
のルールを保持するために使用されます。
@import url(headings.css) layer(default);
@import url(links.css) layer(default);
@layer default {
audio[controls] {
display: block;
}
}
上の例では、 headings.css
と links.css
のスタイルシートのルールは、 audio[controls]
ルールと同じレイヤー内でカスケードされます。
@import "theme.css" layer();
@import "style.css" layer;
この例は、2 つの別個の無名カスケードレイヤーを作成し、それぞれにリンク先のルールをインポートする例です。名前なしで宣言されたカスケードレイヤーは、無名カスケードレイヤーです。名前のないカスケードレイヤーは、作成された時点で確定されます。スタイルを並べ替えたり追加したりする意味を提供せず、外部から参照することはできません。
仕様書
Specification |
---|
CSS Cascading and Inheritance Level 5 # at-import |
ブラウザーの互換性
BCD tables only load in the browser