2008年1月10日 (木)
恐怖のIE6対策
カテゴリ: ウェブデザイン
| コメント (0)
| トラックバック (0)
| 
| 
IE7が出てから結構経ったので、そろそろユーザーも増えただろうと期待してたのですよ。
XHTMLはいまだにapplication/xhtml+xmlのMIMEを受け付けてくれませんが、透過PNGやCSSのposition: fixedも使えるようになったし、かなり凝ったこともやれるのではないかと。
ああそれなのにそれなのに、ちょっとアクセスログ調べてみたところ、うちのサイト覗いてくれてる人って9割方IE6だったりするのですよ。
そらまぁWindowsXP搭載したPCには最初っから入ってる訳だし、企業サイトなんかはほとんどがIE6をターゲットにしてるので、ユーザーにしてみれば乗り換える必要は感じないのでしょう。
ですが作り手にとって、IE6は鬼門ざます。
前述の機能はほとんど使えない（IE独自の機能を使えばなんとかできますが、えれぇコードが読みづらくなる）ため、せっかく苦労してデザインしたサイトが無駄になってしまうことが多いのですよ。
……となれば、なんとか逃げ道を作るしかありません。
透過PNG＋position:fixedの問題
うちのサイトで言うところの、画面上部のナビゲーション(メニューブロック)。
普通に画像張るだけなら、AlphaImageLoaderフィルタを使えばなんとかなりますが、透過PNGはposition:fixedで固定したブロックの背景にする以外、あんまし使い道がありません。
それならあらかじめ透過する背景と合成しといて、JPEGで保存した方が軽いし、古いブラウザでも問題なく表示されるので使いやすいと思います。
なにより、毎回AlphaImageLoaderフィルタを使うのも面倒(←それが本音か)なので、この方法は却下。
結局考えたのは、IE7以上や他のブラウザの場合は普通にCSSで画像を指定して、IE6以下ならばJavaScriptで書き換え、透過GIF画像で代用するという方法。
同時にposision:fixedは無視されてしまうので、position:absoluteで代用。
具体的には以下のコードで対応しました。
まずはJavaScriptの方から。
window.onload = function()
{
// IE6以下の場合、透過PNG背景を透過GIFで代用
if(navigator.userAgent.match(/MSIE [4-6]\./))
document.all('block_id').style.backgroundImage= 'GIF画像URI';
};‘block_id’ の部分は、透過PNGを背景に指定したブロックのIDで置き換えてください。
この例では window.onload を関数リテラルで直書きしてますが、普通に関数にして<body onload=”関数名”>で呼び出した方がスマートかもです。
で、CSSの方はこんな感じ。
/*
* PNG背景を使う画面固定(fixed)ブロックのスタイルシート
* 注意: IE6対策 - 絶対に他のブロックに重ならないよう、配置すること。
*/
#block_id
{
display: block;
position: fixed!important;
position: absolute;
z-index: 65535;
overflow: hidden;
top: 0;
left: 40px;
right:40px;
background: url(PNG背景画像のURI)
} と、これでなんとか表示できました。
IE7やFirefoxなどでは、画面上端にPNG背景の表示固定(フレームのようにスクロールしない)ブロックとなり、IE6以下の場合はGIF背景の絶対座標指定ブロックに変更されます。
キモは ‘position: fixed’ の後に書いた ‘!important’ で、これを書かれた宣言は他の宣言(直後の ‘position: absolute’)よりも優先されます。
このため、‘position: absolute’ の宣言が捨てられて ‘position: fixed’ になる、という仕組みです。
IE6以下の場合はそもそも ‘position: fixed’ に対応してないため、この行は無視(たとえ ‘!important’ があろうとも)されて ‘position: absolute’ が有効になります。
わざわざこんな面倒なことしなくても、素直に以前のようにフレーム使えば済んだだけの話ですが、せっかくリニューアルする以上は、やはり新しいことに挑戦してみたいのですよ。
もっとも、WindowsVitaがもちっと売れてくれれば、全ユーザーにもれなくIE7が付いてくるのですが……。(泣)
うちのサイト見てくださってる方々の中で、Vistaだった人はいまだに数える程度なんですよね。とほほ。
![[妹]](/image/sister.png){kind=small}
-saime-＾ヮ＾/
人が ODW に喰われました。そろそろ墓守も我慢の限界です。