@import
構文
@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 を指定しても同じ効果になります。
形式文法
Error: could not find syntax for this item
例
CSS ルールをインポート
@import 'custom.css';
@import url("chrome://communicator/skin/");
条件付きで CSS ルールをインポート
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
仕様書
| Specification |
|---|
| Unknown specification # at-import |
ブラウザーの互換性
BCD tables only load in the browser