positon:fixedの代わりにCSS Expressionを使ってみた

以前のエントリでheight:100%がよろしくないのでposition:fixedを使うようにしたいが、IE6は対応していない。ではどうするか。

幸か不幸か当サイトのIEを利用した閲覧者の多くがJavaScriptを有効にしているようなのでCSS Expressionという、CSS内でJavaScriptを使えるというIE限定のウル技を使うことにした。

expression() のまとめ

このサイトを参考に以下のように記述。

body {
filter : expression('');
}
#navi {
position : expression( 'absolute' );
top : expression( body.scrollTop + 10 + 'px' );
}

bodyのやつはチラつき防止だそうで、見事に固定された。もしJavaScript無効なら1カラムで表示。うむ、これでいこう!

・・・と思ったが、また落とし穴が。IE6はheight:100%だろうがexpressionだろうが、要素を固定すると非常にCPUに負荷がかかる。3GHzとかのハイエンドクラスの人は気にならないかもしれないが、ミドルやや下なPCだとかなりもっさりっしゅ。

ってか何故に重いのだ? 右側200pxは再描画する必要無いんだから軽くならね? って、それはWindowsがやることでブラウザの中の人とはまた別か。んでIE6は無駄な処理が多いと。

さらにマズいことに、このサイトで一番使われているブラウザがIE6で全体の8割。いつぞやから始まる強制IE7化が始まっても減るのは4割程度か? 無視できる数ではない。

あー、レンダリングエンジンが古いのはどうしようもないよな。IE7はしっかり改良されてるから固定しようがFirefoxと同程度なんで全然問題無いんだがなぁ。IE6以下専用でサイドを固定しないレイアウト作るしかないのか。

カドゥケウスZ 2つの超執刀 -攻略術式集-
レイアウト迷走中。一応進展はしてるけど。(見た目はほとんど変わってない)