インターネットエクスプローラ対策の詳細。

CSS(カスケーディングスタイルシート)の書き方使い方で解説した通り、インターネットエクスプローラで HTML 5 文書に正しくスタイルを適用するには準備が必要になります。

ここでは、そこで行った事について、簡単に解説いたします。

インターネットエクスプローラ対策スクリプトとは。

インターネットエクスプローラでは、予めプログラムされた要素以外の要素は、そのままでは認識する事が出来ません。

このため、HTML 5 で新たに設定される予定の要素は認識出来ません。

  • 実は、HTML 5 より前の現行の規格で定められた要素の中にも、一部認識出来ないものがあります。

ところが、これらのインターネットエクスプローラにとって"未知"の要素も、JAVAスクリプトと呼ばれるウェブブラウザ上で動作する簡易プログラミング言語を用いる事で認識が可能になります。

以下が、準備として作成した インターネットエクスプローラ対策スクリプトです:

h5=new Array('abbr', 'article', 'section', 'nav', 'aside', 'figure', 'figcaption', 'header', 'footer', 'hgroup', 'mark', 'time', 'bdi', 'details', 'summary', 'video', 'audio', 'source', 'track', 'progress', 'meter', 'datalist', 'command', 'keygen', 'canvas');
i=h5.length; while (--i>=0) document.createElement(h5[i]);
  1. 初めの行に、
    • HTML 5 で導入予定の要素
    • 現行の規格にありながらIE 6.0 までで認識しない要素

    を列挙しております:

    h5=new Array('abbr', 'article', 'section', 'nav', 'aside', 'figure', 'figcaption', 'header', 'footer', 'hgroup', 'mark', 'time', 'bdi', 'details', 'summary', 'video', 'audio', 'source', 'track', 'progress', 'meter', 'datalist', 'command', 'keygen', 'canvas');

    ちなみに、後者に該当するのは<abbr>要素だけで、あとは全て HTML 5 で新たに導入される予定のものです。

  2. 二行目で、それらの要素が認識出来るように一つずつ処理しております:
    i=h5.length; while (--i>=0) document.createElement(h5[i]);

インターネットエクスプローラ対策スクリプトの埋め込みについて。

一般に、JAVAスクリプト(ウェブブラウザ上で動作する簡易プログラミング言語)のコードは、実行させたい HTML 文書に埋め込まなければなりません。

HTML 文書にスクリプトを埋め込む要素として、<script>要素があります。

<script>要素での埋め込み方にはいくつかの方法がありますが、予め作っておいたスクリプトファイルを読み込んで埋め込むのであれば、以下のようにします。

<script type="text/javascript" src="埋め込みたいスクリプトのURL"></script>

ところで、今回の対策スクリプトはインターネットエクスプローラでのみ必要であり、ファイヤーフォックス, オペラ, サファリ及びグーグルクロムなどでは余計なトラフィックが発生するだけで意味がありません。

  • もっとも、余計なトラフィックが発生する以上の害毒はありませんが。

このため、インターネットエクスプローラ以外では、この<script>要素は無効にしておきたいものです。

そこで、インターネットエクスプローラ独自の実装である、条件コメントを利用します。

条件コメントについての詳細はここでは割愛しますが、要はある条件を満たしたウェブブラウザでのみコメントでないものとすると言う記述です。

  • インターネットエクスプローラ以外では一切実装例がありません。このため、IE以外ではその書式から一律に注釈宣言と認識され、内容は全て注釈扱いとなります。このため、IEでのみ有用なコンテンツを記述する場合に使えます。
<!--[if IE]>
   (IE以外では注釈扱いとされるテキスト)
   <![endif]-->

そこで、件の<script>要素をこの条件コメント内に入れる事にします:

<!--[if IE]>
   <script type="text/javascript" src="埋め込みたいスクリプトのURL">
   <![endif]-->

実際には、条件コメントの内部での改行や水平タブは意味がないので、これらを詰めると以下のようになります:

<!--[if IE]><script type="text/javascript" src="埋め込みたいスクリプトのURL"><![endif]-->