Jul. 28th,2021
“@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) {
...
