Mach3.laBlog

「No More IE6」へのアプローチ

この記事は賞味期限切れです。(更新から1年が経過しています)

No More IEへのアプローチ

マイリスペクト「地獄のミサワの「女に惚れさす名言集」
にインスパイアされて描いてみました。ペンタブほしい。

さて、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はずいぶんと幸せ者だと思います。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*