@import
@import は CSS のアットルールで、スタイルルールを他の有効なスタイルシートからインポートするために使用します。 @import ルールはスタイルシートの最上位で、他のアットルール（@charset や @layer を除く）やスタイル宣言の前に定義する必要があり、そうしなければ無視されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| DOM API | ||||||
| CSSImportRule は @import アットルールを表します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| href は CSSImportRule インターフェイスの読み取り専用プロパティで、 @import アットルールで指定された URL を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| media は CSSImportRule インターフェイスの読み取り専用プロパティで、 MediaList オブジェクトを返します。ここには関連付けられたスタイルシートの media 属性の値が入っています。 | 1 | 12 | 1 | 1 | 18 | 1 |
| styleSheet は CSSImportRule インターフェイスの読み取り専用プロパティで、 @import アットルールによって指定された CSS スタイルシートを返します。これは CSSStyleSheet オブジェクトの形です。 | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
@import url('reset.css');
@import url('theme.css') screen;
@import url('print.css') print;ライブデモ
実務での使いどころ
-
スタイルシートの分割管理
リセット、テーマ、レイアウトなどの目的別にCSSファイルを分割し、@importで統合することで保守性を高めます。
注意点
- @importは追加のHTTPリクエストを発生させ、レンダリングをブロックするため、本番環境ではCSSのバンドル・結合を検討してください。
アクセシビリティ
- @import自体はアクセシビリティに影響しませんが、読み込み遅延によるFOUC（スタイル未適用のフラッシュ）がユーザー体験を損なう場合があります。