HTML5 コンテンツを古い Internet Explorer に対応させるには?

Article
06/29/2011

HTML5 や CSS3 の新機能はすばらしく、その登場は喜ばしいものでありますが、残念な点がひとつだけあります。

それは Internet Explorer 6 のような古い Web ブラウザーでは動作しないということです。

実際のところ HTML5 で記述された Web コンテンツは、Internet Explorer 8 までの HTML5 をサポートしない古い Web ブラウザーでは HTML5 のタグが無視されてしまうので意図したとおりの表示にはなりません。

たとえば、以下のような HTML5 で新しく追加されたタグを使用しているページを、HTML5 をサポートしている Internet Explorer 9 と、サポートしていないそれ以前の Internet Explorer で読み込んで比較すると明らかな表示の違いがあります。

<!DOCTYPE html>
<html>
<head>
    <title>This is nice Web page.</title>
    <style type="text/css">
        header{color:blue;}
        article{background-color:Aqua;}
        aside{background-color:gainsboro;}
    </style>
</head>
<body>
    <header>
        <h1>ナイスな Web コンテンツ</h1>
        <nav>
            <h1>サイトのご案内</h1>
            <ul>
                <li><a href="#_hop">ホップ</a></li>
                <li><a href="#_step">ステップ</a></li>
                <li><a href="#_jump">ジャンプ</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h1 id="_hop">ホップ(HOP)</h1>
        <article>
            (ここに記事を書いてください)
        </article>
        <aside>
            (ここに余談でも書いてくださいよ)
        </aside>
    </section>
        <section>
        <h1 id="_step">ステップ(STEP)</h1>
        <article>
            (ここに記事を書いてください)
        </article>
        <aside>
            (ここに余談でも書いてくださいよ)
        </aside>
    </section>
    <section>
        <h1 id="_jump">ジャンプ(JUMP)</h1>
        <article>
            (ここに記事を書いてください)
        </article>
        <aside>
            (ここに余談でも書いてくださいよ)
        </aside>
    </section>
</body>
</html>

( HTML5 のタグを使用した Web ページ )

以下は、Expression Web 4 の Super Preview を使用した、IE9 と IE6 の表示結果の比較です。HTML5 で追加された新しいタグは無視されるだけなので、タグ内の文字は表示されますが、新しいタグに指定したスタイルシートは無視されます。

( SuperPreview による IE9(左) と IE6(右) の描画の比較 )

では、こういった古い Web ブラウザーに対しては、HTML5 タグを使用できないかというと、必ずしもそうではありません。

以前のバージョンの Internet Explorer で HTML5 タグを認識させる方法

HTML5 のタグに限った話しでいえば、JavaScript の document.createElement メソッドを使用して、HTML5 で追加された新しいタグを明示的に作成してやれば、IE6 のような古い Web ブラウザーであってもタグを認識することができます。

たとえば、前述の HTML ソースの <style> タグの前に以下のコード追加すると、IE6 の描画エンジンでも HTML5 のタグが認識され、スタイルを適用させることができます。

//Web ページが使用している HTML5 タグを追加
<script type="text/javascript">
   document.createElement("header");
   document.createElement("nav");
   document.createElement("section");
   document.createElement("article");
   document.createElement("aside");
</script>

( Web ページで使用している HTML5 タグを追加 )

以下は、前述の JavaScript コードを使用した IE9 と IE6 の描画の比較です。まだ若干、表示に違いがあるものの、タグが認識されスタイルシートが適用されているのがわかります。

( SuperPreview による IE9(左) と IE6(右) の描画の比較。 )

つまり、IE6 のような古い Web ブラウザに「HTML5 タグを、タグとして認識させる」という点においては、「あらかじめ HTML5 で定義された新しいタグを JavaScript で追加しておけば良い」ということになります。

しかし、そうは言っても、HTML5 で追加された全てのタグを追加する JavaScript を記述するのもいささか大変です。

そういった場合には、「html5shiv（https://code.google.com/p/html5shiv/）」で公開されている JavaScript ライブラリを利用することができます。これをスタイルシートを定義、あるいは指定した部分よりも前に配置すれば、以前のバージョンの Internet Explorer でも HTML5 で新しく追加された要素が認識され、スタイルシートも適用されるようになります。

使い方は、先ほど document.createElement メソッドを記述した箇所に、代わりに以下の行を記述するだけです。

( html5shim の使用 )

同様の機能を、モダンブラウザーを判別するためのライブラリーである「Modernizr」でも、副次的な機能として提供しているので、用途や好みに合わせて使い分けるのも良いでしょう。

ちなみに Modernizr を使用する場合は、JavaScript ライブラリである modernizr-(バージョン).min .js ファイルを仮想ディレクトリに配置して、html5shiv と同様に <Script> タグで参照します。

こういった方法を使用することで、HTML5 タグをサポートする以前の Internet Explorer にも HTML5 タグを認識させることが可能になるわけですが、残念ながらこれはあくまでも「タグとして認識する」ようになっただけであり、その機能まで提供しているわけではありません。

たとえば、html5shiv の JavaScript ライブラリを参照している Web ページ内に <video> タグを記述したとしても、IE6 などの Web ブラウザーでは動画を表示することはできません。

では、IE6 のような HTML5 をサポートする以前の Web ブラウザーでは、<video> タグは使用できないのかというと、実は、これも必ずしもそうではありません。

IE9 以前のバージョンの Internet Explorer での <video> タグの使用

IE9 以前のバージョンの Internet Explorer での <video> タグの使用を可能にする JavaScript ライブラリとして、github にて「html5media (https://github.com/etianen/html5media)」が提供されています。

これを以下のように使用すると、IE6 などの Web ブラウザーでも、<video> タグによる動画の再生が可能になるらしい (※) です。

(※) “らしい” と書いたのは、私の検証環境 ( InternetExporer 8 on Windows XP + 最新の SP + Adobe Flash10 ) では動画の再生が確認できなかったためです。なにか環境的な準備が必要なのかも知れません。

( html5media.js を使用した <video> タグの使用例)

IE9 以前の Internet Explorer での CSS3 の利用

CSS3 が提供する、すべての機能をサポートするわけではありませんが、「css3pie (https://css3pie.com/)」は、render-radius、box-shadow や linear-gradient などの機能を IE9 以前のバージョンの Internet Explorer に提供してくれます。

具体的な使い方については、css3pie の Web サイトを参照するか、私のブログでも前回の記事で border-radius の指定で触れていますので、そちらをご覧ください。

IE9 以前の Internet Explorer への、その他の HTML5 機能の対応について

ここまで紹介した以外でも、Web 上には、IE9 以前のバージョンの Internet Explorer に HTML5 の機能を疑似的に提供するためのさまざまな Polyfill (※) ライブラリーが公開されています。

(※) こういった、古い環境を、新しい技術環境に合わせ近づけて差をなくすことを「Polyfill（ポリフィル）」と言うそうです。

とくに github の「HTML5 Cross Browser Polyfills (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills)」では、SVG、WebStorage、CSS3 Transform などの機能ごとにライブラリがまとめられていますので、古い Web ブラウザーの HTML5 対応に関しては、これらを用途に合わせ使用していくのが良いでしょう。

■

ここまで書いておいてなんなのですが、ようするに全員が HTML5 をサポートした最新の Web ブラウザーを使用すればこのような裏ワザ的なことをする必要もないので、お近くに理由もなく古い Web ブラウザーを使用している人がいらっしゃいましたら、ぜひ最新の Web ブラウザーにバージョンアップするよう、お薦めいただければと思います。

なお、その際お薦めする Web ブラウザーは、最新の Internet Explorer でよろしくおねがいします。

Clicky

HTML5 コンテンツを古い Internet Explorer に対応させるには?

Additional resources