Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
構文・カスケード Widely available

@import

外部のCSSファイルを現在のスタイルシートに取り込むためのルールです。スタイルシートのモジュール化や分割管理を可能にし、メンテナンス性を向上させます。ただし、追加のHTTPリクエストが発生するため、パフォーマンスへの影響を考慮する必要があります。

スタイルシート読込モジュール化

概要

外部のCSSファイルを現在のスタイルシートに取り込むためのルールです。スタイルシートのモジュール化や分割管理を可能にし、メンテナンス性を向上させます。ただし、追加のHTTPリクエストが発生するため、パフォーマンスへの影響を考慮する必要があります。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
@import url('reset.css');
@import url('theme.css') screen;
@import url('print.css') print;

実務での使いどころ

  • スタイルシートの分割管理

    リセット、テーマ、レイアウトなどの目的別にCSSファイルを分割し、@importで統合することで保守性を高めます。

注意点

  • @importは追加のHTTPリクエストを発生させ、レンダリングをブロックするため、本番環境ではCSSのバンドル・結合を検討してください。

アクセシビリティ

  • @import自体はアクセシビリティに影響しませんが、読み込み遅延によるFOUC（スタイル未適用のフラッシュ）がユーザー体験を損なう場合があります。

参考リンク