近頃いろんなサイトのHTMLソースを見ていて気づいたのですが、CSSを読み込む際の「@ import」がないサイトが多い事に気づきました。私はよく使っているので何で使ってないのかが気になったので調べてみました。
なぜ使わないか
調べたところ、IEの描写速度の問題でした。
基本的にブラウザは複数のファイルを同時に読み込む事が可能になっていますが、
IEではこの「@ import」を使うとCSSファイルを同時に読み込むことができず（順番に読み込む）に、結果描写速度が遅くなります。
サイトの表示スピードでユーザーの離脱が減るといいますので、表示スピードを少しでも早くしたい場合に使用しているようです。
管理面の問題
ただHTMLファイルを修正しないでCSSファイルを追加できるので、サイトの運用方法によっては「@ import」を使用した方がいい場合もあると思います。
昔々・・・
少し前のブラウザは@ importの解釈がおかしいものがあったので、ハックとして使われていました。
現在は@ importハックを使って分岐させるようなブラウザをサポートしているページは少ないと思いますので、こういう意味ではもういらないかもしれませんね。
まとめ
自分的なまとめは以下になります。
- @ importを使うとページの読み込み速度が遅くなる（IE）
- 管理は楽になるので、状況によって使い分けた方がいい
何か他にも別の理由があるのかなとも思いますが、他に理由が見つからなかったので現状はこう思っています。
参考サイト
詳しい検証は以下のサイトをご覧下さい。
コメント