このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

@import”ルール

記事Jul. 28th,2021
スタイルシートに他のスタイルシートのスタイル・ルールを取り込む“@import”ルール
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

@import”ルール

@import”ルールはスタイルシートに別のファイルに記述されたスタイルシートのCSSルールを取り込みます。

@import”ルールによって参照されるスタイルシートが有効なものであれば、その“@import”ルールが配置された場所に記述されているかのように扱われます。ただし、@namespace”ルールのような効果の範囲が記述されたスタイルシートに限定されるCSSルールやスタイルシートの中で配置される順番が定義されているCSSルールは“@import”ルールによって取り込まれません。

@import”ルールは@charset”ルール以外のすべてのCSSルールよりも前に記述されなければなりません。@charset”ルールと他の“@import”ルール以外のCSSルールよりも後に記述された“@import”ルールは無効です。

@import”ルールは条件付グループ・ルールの中に配置することはできませんが、メディア・クエリフィーチャー・クエリを使用することで取り込んだCSSルールを適用する条件を指定することができます。

@import”ルールの構文

@import”ルールの基本の構文は“@import”に続く<url>”値もしくは<string>”値として記述された1個のスタイルシートのURLからなります。

@import 〚URL〛 ;

<string>”値として記述されたURLは同じURLを引数として含むurl()”関数と同じように扱われます。

条件付きの“@import”ルール

URLに続き、いずれも任意であるフィーチャー・クエリメディア・クエリ・リストを記述することで取り込まれるCSSルールの適用条件を限定することができます。

機能への対応の有無で限定
@import 〚URL〛 supports(〚フィーチャー・クエリ〛) ;

デバイスの特性で限定
@import 〚URL〛 〚メディア・クエリ・リスト〛 ;

機能への対応の有無とデバイスの特性で限定
@import 〚URL〛 supports(〚フィーチャー・クエリ〛) 〚メディア・クエリ・リスト〛 ;

フィーチャー・クエリは“supports()”関数の引数として記述します。通常フィーチャー・クエリサポーツ・フィーチャーは括弧(“(”と“)”)で囲みますが、演算子を使用しない単独のサポーツ・フィーチャーを“supports()”関数の中に記述する場合は重複する括弧の省略が可能です。

メディア・クエリ・リストフィーチャー・クエリをいずれも省略した場合は取り込んだスタイルシートにある条件付グループ・ルールやHTMLのlink”要素などで制約がない限り無条件で適用されます。

使用例

/* 無条件に適用されるスタイル */
@import url(stylesheet-2.css) ;

/* グリッド・レイアウトに対応している場合に適用されるスタイル */
@import url(stylesheet-grid.css) supports(display: grid) ;

/* ダーク・モードのスクリーン・デバイスである場合に適用されるスタイル */
@import url(stylesheet-dark.css) screen and (prefers-color-scheme: dark) ;

/* フレックス・レイアウトとグリッド・レイアウトのどちらにも対応している場合に適用されるスタイル */
@import url(stylesheet-flex.css) supports((display: grid) and (display: flex)) ;

/* グリッド・レイアウトに対応していて、ダーク・モードのスクリーン・デバイスである場合に適用されるスタイル */
@import url(stylesheet-dark-2.css) supports(display: grid) screen and (prefers-color-scheme: dark) ;

/* その他のCSSルール */
@namespace url(http://www.w3.org/1999/xhtml);

@media all and (max-width: 640px) {
...

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 勧告候補(CR) 勧告候補(CR)
@import
定義あり

定義あり

定義あり

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 勧告候補(CR)
supports()
定義なし

定義なし

定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク