@import

@importCSSアットルールで、他のスタイルシートから @charset を除いたスタイルルールをインポートするために使用します。

構文

@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

関連情報