CSS @importルール
定義と用法
@importルールは、別のスタイルシートにスタイルシートをインポートするために使用できます。
@importルールはドキュメントのトップに位置する必要があります（@charset宣言の後に位置する必要がありますが）。
@importルールはメディアクエリをサポートしており、メディアに依存するインポートを許可します。
例
例1
"navigation.css"スタイルシートを現在のスタイルシートにインポートします：
@import "navigation.css"; /* 文字列を使用 */
または
@import url("navigation.css"); /* urlを使用 */
例2
プリントメディアでのみ、"printstyle.css"スタイルシートをインポートします：
@import "printstyle.css" print;
例3
スクリーンメディアで視口の最大幅が768ピクセルの場合にのみ、"mobstyle.css"スタイルシートをインポートします：
@import "mobstyle.css" screen and (max-width: 768px);
CSS文法
@import url|string list-of-mediaqueries;
属性値
| 値 | 説明 |
|---|---|
| url|string | urlまたは文字列で、インポートするリソースの場所を表します。urlは絶対的または相対的でかまいません。 |
| list-of-mediaqueries | カンマで区切られたメディアクエリリストは、URLからインポートされたCSSルールがどのような条件下で適用されるかを決定します。 |
ブラウザのサポート
テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.5 | 1.0 | 1.0 | 3.5 |
