Steve Souders「@import使うな」

don’t use @import

「High Performance Web Sites」の著者のSteve Souders＠Googleのエントリ。
「High Performance Web Sites」5章の「Rule 5: Put Stylesheets at the Top5」（pp.37-44)の補足が主旨。
Web 2.0 Expoでの講演がベース。

• IEのcssのダウンロード方法の特殊さ
  • link要素経由のCSSファイルのダウンロードが完了しないと、「@import」経由のCSSファイルのダウンロードは開始しない
  • 「@import」経由の場合、style要素と組み合わせる場合と、cssファイルからロードする場合の2パターンあるが、どちらでも発生。
  • 他のモダンブラウザでは経由方法に関係なくブラウザの最大DL数の制限の範囲内で並列DLされる。
• IEでは、ソースに書かれた順にcssがダウンロードされない。
  • @importを使って複数のcssファイルのロードするときに発生
  • テストページでは、cssファイル4つのうち、4番目に書かれたcssファイルが最初にロードされている。
  • 全てlink要素でロードすれば、htmソースで指定した順番でcssファイルはロードされる。
• IEでは、cssとjsのダウンロード方法も特殊
  • ソースに書かれた順番にロードされない
  • link、style要素で@importを使うと発生。
  • link、style要素が先、script要素が後に書かれても、cssのロードを待たずに、jsのロードされたり、jsが先にロードされたりする。
• 結論、@import使うな
  • ブラウザ側でこのダウンロード面の問題が解決されるまでは、使わないのがオススメ
  • 書き方の面も、@importは書き方に色々ルールがあるのでトラブルの元になりやすい。