IEで@importルールを使う際のデメリット2点

追記

2008.11.12少し更新。整理した。少し検証した。
回避可能なデメリットな気がしてきた。

はじめに

CSSハックの話ではない
自分で検証・追試したわけではない
（CSSのグルである）Ericがこう言ってる・・・、と（JS/DOMのグルである）Jeremyが書いてたという伝聞

@importルールを使う際のデメリット

• @importを使ってリンクされたcssファイルは、IEではキャッシュされない。ページ移動するたびに再読み込みされるという点で、転送量データ量が無駄に増えてパフォーマンスが低下する。無駄なhttpリクエストの発生。
• style要素を用いて、@importでcssファイルを読み込むとき、ページの末尾（</body>の近く）からlink要素でcssファイルの読み込みをしているかのような動作をIEはしてしまう。そのため、CSSのレンダリングが遅れる。例えば、いわゆるFOUC(Flash of Unstyled Content)の原因になる。

２点目は「link要素＋@import」ではなく「style要素＋@import」で発生する問題。

<style type="text/css" media="screen">@import "style.css";</style>

import.cssのようなCSSファイルの中で@importを記述してファイル読み込みする場合については触れていない。
@importはCSSのメンテナンスでは良くある手法。だけど、上記のデメリットが事実ならば、念頭に置いてどーするか決める。回避方法を探る、トレードオフを認識して選択する、etc..

IEでキャッシュされない問題

典拠

//adactio.com/journal/1498" target="_blank">The Lessons of CSS Frameworks:JeremyによるAn Event Apart Chicago 2008のライブログ。

Some of the frameworks have a single short style sheet that you point to from your markup, which then links off to separate style sheets for fonts, colours, layout, etc. But most of them use separate style sheets and you must link to each one in your markup. Eric reckons that this is because IE for Windows will cache the first style sheet you point to with a link element but not any subsequent style sheets with @import.

//www.scribblelive.com/Event/An_Event_Apart_San_Francisco?Page=1#LiveBlog_Post22973" target="_blank">An Event Apart San Francisco...live blogging:同じくAn Event Apart Chicago 2008のライブログ。Jeremyよりも超詳しい版。

IE/Win only caches the first css file when you use @import (the WIRED method) rather than the 'standard' linking method. I've never dealt with that because: a) never dealt with a site crazy enough to really worry to much about server performance, and b) I've never really used the @import method. :)

二つとも話の出所は、An Event Apart Chicago 2008でのEric Meyerのプレゼン「The Lessons of CSS Frameworks」に行き着く。
Eric以外にこの問題を指摘している人は自分は見つけていない。
link要素で読み込まれたcssファイルはキャッシュするが、このcssファイルから@importを使って読み込まれたcssファイル（subsequent style sheets）はキャッシュされない、と言っている模様。

IEでキャッシュされない問題を回避するには

解決方法は見つけてない。
というかこの問題を再現できない。@importルールで複数のcssファイルにリンクしているcssファイルをlink要素で読み込んでるサイトをIEで見てヘッダとかチェックしたけど問題なくキャッシュされてたし。

>@importを使うとcssファイル読み込みが後回しになる問題

典拠はYahoo! Developer Networkの有名な記事。

//developer.yahoo.com/performance/rules.html#csslink" target="_blank">Best Practices for Speeding Up Your Web Site:この記事自体はウェブサイトのパフォーマンスチューニングのための34のベストプラクティスがかかれたもの。CSSについて書かれてるのはそのうち３~４個。

One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.
In IE @import behaves the same as using at the bottom of the page, so it's best not to use it.

//www.bluerobot.com/web/css/fouc.asp/" target="_blank">Flash of Unstyled Content (FOUC):FOUCの紹介記事。FOUCの体験方法（IE5以上を用意しましょう、キャッシュはクリアしましょう、・・・等々）から、解決方法まで。

解決の方向は２通り。style要素（＋@import）を使用しつつ回避を目指すか、style要素は使わずに回避を目指すか。

style要素と@importは使いたいが問題は解決したい場合

上述のFlash of Unstyled Content (FOUC)にて紹介されてる。

• 問題になるstyle要素の上にlink要素を置く（印刷用のcssファイルへのリンクなど）
• 問題になるstyle要素に上に空のscript要素を置く

この解決方法の問題点として、文書上必要なlink要素を置けない場合がある点。不要なscript要素を置く点。

@importを使うことにこだわらずにレンダリングの遅れを解決したい場合

上のYUIの記事でも言われてるが、style要素を使わずlink要素を使えば解決。