CSS @ importルール
例
「navigation.css」スタイルシートを現在のスタイルシートにインポートします。
@import
"navigation.css"; /* Using a string */
or
@import
url("navigation.css"); /* Using a url */
以下のその他の例。
定義と使用法
この@import
ルールを使用すると、スタイルシートを別のスタイルシートにインポートできます。
@import
ルールはドキュメントの先頭にある必要があります(ただし、
@ charset
宣言の後)。
この@import
ルールはメディアクエリもサポートしているため、インポートをメディアに依存させることができます。
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
@import | 1.0 | 5.5 | 1.0 | 1.0 | 3.5 |
CSS構文
@import url|string list-of-mediaqueries;
プロパティ値
Value | Description |
---|---|
url|string | A url or a string representing the location of the resource to import. The url may be absolute or relative |
list-of-mediaqueries | A comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL |
その他の例
例
メディアが印刷されている場合にのみ、「printstyle.css」スタイルシートをインポートします。
@import
"printstyle.css" print;
例
メディアが画面で、ビューポートが最大768ピクセルの場合にのみ、「mobstyle.css」スタイルシートをインポートします。
@import
"mobstyle.css" screen and (max-width: 768px);