読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

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は書き方に色々ルールがあるのでトラブルの元になりやすい。