REDLINE MAGAZINE | FOUC

FOUC

忘れないように私的メモ。
先日読んだ「CSS Zen Garden Book」の中に書かれていたFOUC(Flash of Unstyled Content)。

外部cssファイルをlink要素を使用せずに@importで読み込んだ場合、winIEで一瞬cssが適応されてない状態のコンテンツが表示されるという現象。

回避方法としては、head内にlink要素かscript要素がある場合はFOUC現象は起こらない。

FOUC詳細
Flash of Unstyled Content (FOUC)

実のところ、私は普段linkで読み込む方法ばかり使ってきたので、@importでどうなるかとかちゃんと確認してなかった。つーことで、上の解説ページの通りに検証。

手順としては上記ページの「How do I see a FOUC?」の１から５の通りなんだけど、Temporary Internet Filesを消さなきゃいけないっていう部分だけがポイントっぽい。要するに１回見たページは大丈夫なわけだ。わざわざページを作るのも面倒なので、そのページ内にあるサンプルを利用して確認してみる。

「How do I vanquish the FOUC? (How do I fix it?)」が上にも書いた回避方法。で、その下の「Test the basic HEAD element for the FOUC phenomenon.」のリンクをIEでクリックしてみる。ページが開いたら
Temporary Internet Filesを削除してから「Click here」をクリック。

･･･見えた!一瞬だけど素のコンテンツが見えた。
なんか一瞬のことなんだけど奇妙な感じ。商用サイトではなんとなくこれはユーザーに見せたくない･･･と思ってしまうような･･･。うむ。こういう現象があるって事を覚えておこう。

2006年10月27日 22:42 | Red | パーマリンク