「No More IE6」へのアプローチ
この記事は賞味期限切れです。(更新から1年が経過しています)
マイリスペクト「地獄のミサワの「女に惚れさす名言集」」
にインスパイアされて描いてみました。ペンタブほしい。
さて、Web制作者にとってIE6への対応はかなりの足枷。
出来るだけIE6ユーザーにはモダンブラウザに乗り換えてもらいたい所ですね。
そこで、IE6で閲覧すると、アップデートを促すメッセージを表示させる。
そのための手法をいくつかまとめてみました。
1. CSSハックで表示
IE6用のメッセージを予め文書内に設置しておき、
CSSハックでIE6にだけ表示する。とても簡単。
#no-more-ie6{
display: none;
_display: block;
}
ただ、ハックを使うとCSSがValidで無くなるため、
好まない人もいるでしょう。そこで、
2. 条件分岐コメント
IE独自の条件分岐コメントで、IE6だけにメッセージを表示する。
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6.0]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
style.css
#no-more-ie6{
display: none;
}
ie6.css
#no-more-ie6{
display: block;
}
しかし、IE6からの脱却を勧めたいのにIE6専用のスタイルシートを用意する、
というのもなんだか気持ち悪いですね。
3. よろしい、ならばJavaScriptだ
jQuery等のライブラリを用意すればいとも簡単に処理できます。
HTML
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="noie6.js"></script>
noie6.js
if (typeof document.documentElement.style.maxHeight == "undefined") {
$("<div><strong>貴方がお使いのブラウザはもう息をしていません。</strong></div>")
.prependTo( $("body") );
}
これでページ最上部にメッセージが挿入されます。
なんて便利なんだjQuery。
4. Ajaxでもっと彩り豊かに
メッセージと一緒にモダンブラウザのダウンロードページに誘導したい。
そうなるとHTML生成の部分がかなりゴチャゴチャして気持ち悪いソースになります。
ならば、Ajaxで外部読み込みをしてみましょう。
JavaScript
if (typeof document.documentElement.style.maxHeight == "undefined") {
$("<div />").prependTo( $("body")).load("noie6.html");
}
noie6.html
<div id="no-more-ie6">
<h4>そのブラウザ、息してますか?</h4>
<p>今すぐ息をしているブラウザにアップデート!</p>
<ul>
<li><a href="#" target="_blank">Google Chrome</a></li>
<li><a href="#" target="_blank">Firefox</a></li>
<li><a href="#" target="_blank">Safari</a></li>
</ul>
</div>
だいぶすっきりしました。
それにしても、立派な葬式をあげてもらえたり、
わざわざ専用のクラックコード
を考案してもらえたり、(良い子は真似をしないように)
世界中の人々に構ってもらえるIE6はずいぶんと幸せ者だと思います。
コメント