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

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

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

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

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

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つの超執刀 -攻略術式集-
レイアウト迷走中。一応進展はしてるけど。（見た目はほとんど変わってない）

Info

Navigation

関連のあるエントリ: 2006-01-20 枠付きグラデで四角い角を丸くする - Nifty++; 2007-06-18 ニコニコ動画視聴補助CSS; 2007-05-16 あの素晴らしいCSSを二度三度; 2008-04-20 Stylishで快適にユーザースタイルシートを書くための覚書; 2008-04-20 Stylishで偏執的なレイアウトを作成するための覚書
新しいエントリ（日付順）: 複数のwavファイルを一つのwav+cueにする方法
古いエントリ（日付順）: 2006年ベストゲーム

SBM Comments

blanc2005: css内でjsを使えるIE独自の「expression」
developmentor: bodyのやつはチラつき防止だそうで、見事に固定された。もしJavaScript無効なら1カラムで表示。うむ、これでいこう！

Comment

投稿したコメントは公開されません。サイトオーナーのみが閲覧できます。
返信等を希望する場合は、コメント内に連絡先のメールアドレスかサイトのURLを入力してください。

2007
0102

Tagscss