IE8で互換性の実現や新機能を利用するには? - MSがサイト管理者向けガイド

IEチームではIE8 Standards Mode上での互換性問題の多くを把握している。これは既存のサイトがIE8でサポート対象外となった機能を利用していることに起因しており、長期的視点から最良の解決策として、IE8 Standards Modeでの動作を前提にサイトに変更を加えるようアドバイスしている。だが暫定的な解決策として、IE8のIE7互換モード(IE8 Compatibility View)を利用するのも手だ。互換モードの詳細についてはIEチームブログの投稿で紹介されているが、とりわけ下記で記された点に留意したい。

Version Detection

「バージョン判別処理のミスによる誤動作は、条件付きコメント(コンディショナルコメント)、スクリプト、サーバ側での処理が原因でしばしば引き起こされるが、その原因の多くは条件付きコメントであり、多くのサイトでバージョン判別テクニックとして利用されている」。

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" src="ie.css" /> 
<![endif]-->

解決方法: 正常なバージョン判別が行われるようサイトを書き換えるか、可能であれば下記のオブジェクトによる判別方法を利用する。

<!--[if lte IE 7]> 
    <link rel="stylesheet" type="text/css" src="ie.css" /> 
<![endif]-->

Object Detection

「オブジェクト検査を行う際、ある機能の検査に別の機能の呼び出しを行った場合、もし両方の機能が特定のバージョンで同時にサポートされていなかったとしたら、結果として誤動作を引き起こす」。

if(window.postMessage) { 
    window.addEventListener( 
        "load", 
        myHandler, 
        false 
    ); 
}

解決方法: コード同士の依存関係をなくし、適切なオブジェクト検査用コードを埋め込む(下記コード参照)。

if(window.addEventListener) { 
    window.addEventListener( 
        "load", 
        myHandler, 
        false 
    ); 
}

Malformed HTML

「HTML文法のエラー訂正方法がIE8 Standards Modeでは変更されている。結果としてIE7での動作に依存していたページはIE8での動作に支障をきたすことになる」。

<ul> 
    <li>1.1 
        <ul> 
            <li>1.1.1</li> 
    </li> <!-- Closes 1.1 in IE8, but not IE7 --> 
            <li>1.1.2</li> 
        </ul> 
    </li> 
</ul>

解決方法: きちんと正規の形でマークアップ言語を記述する。

<ul> 
    <li>1.1 
        <ul> 
            <li>1.1.1</li> 
    <!-- </li> --> 
            <li>1.1.2</li> 
        </ul> 
    </li> 
</ul>

Element’s Class

「IE7ではアトリビュート名として「className」を利用した場合に同エレメントのクラスを抽出できたが、IE8 Standards Modeでは標準に準拠する形で修正が加えられている。そのためIE8では旧名の「className」を使用しても本来の結果は得られない」。

return elm.getAttribute("className");

解決方法: 「className」の代わりに「class」を使用する。

return elm.getAttribute("class");

GetElementById

「同メソッドは "Case Sensitive"、すなわちアルファベットの大文字と小文字を区別するようになっており、ネームアトリビュートの検索は行わない」。

    <div id="Test"></div> 
    <script type="text/javascript"> 
        // No element is found because of case difference 
        var test = document.getElementById("test"); 
    </script>

解決方法: 大文字と小文字をきちんと区別して記述し、ネームアトリビュート検索には「getElementsByName」メソッドを使用する。

    <div id="Test"></div> 
    <script type="text/javascript"> 
        // Element Test is found 
        var test = document.getElementById("Test") 
    </script>

Generic CSS Prefix Selectors

「CSS構文解析における標準準拠を理由に、ジェネリックCSSプリフィクスセレクタはIE8 Standards Modeではサポートされない。これが最も影響を与えるのはVMLエレメントにビヘイビアを付与するためにページがCSSを読み込むときで、スクリプトエラーを引き起こしたり、CSSに対してハードコーディングが行われていた場合に動作不良を起こしたりする。究極的には、VMLがページ上に表示されないなどの問題を起こす」。

v\:* { 
    behavior: url(#default#VML); 
}

解決方法: CSSプリフィクスセレクタを使用する場合、合致させたい個々のネームタグを明示する。

v\:polyline, 
v\:line { 
    behavior: url(#default#VML); 
}

CSS Expressions

「CSS Expressions(CSSエクスプレッション) はIE8 Standards Modeではサポートされない」。

/* CSS */ 
#main { 
    background-color: expression( 
        (new Date()).getHours()%2 ? "#000" : "#fff" 
    ); 
}

解決方法: 強化されたCSSサポートまたはDHTMLのいずれかを利用する。

/* Script */ 
var elm = document.getElementById("main"); 
if((new Date()).getHours()%2) { 
    elm.style.backgroundColor = "#000"; 
} else { 
    elm.style.backgroundColor = "#fff"; 
}

Native JSON Object

「IE*ではNative JSON Object(ネイティブJSONオブジェクト) )をサポートする。これはES3.1 Proposal Working Draftに書かれた基準に準じたもの。一部のページはJSONオブジェクトを認識し、それを非標準の形で扱うことがある。これが結果としてスクリプトエラーを引き起こし、AJAXリクエストの手順を破壊してしまう」。

if(!window.JSON) JSON = myJSON; 
JSON.encode(obj); // Not part of the standard」

解決方法: 非標準の文法をカスタムJSONオブジェクトで定義してしまうか、あるいは標準準拠の形でコードを記述し直す。

JSON = myJSON; 
JSON.encode(obj);

Initial CSS Property Values

「currentStyleオブジェクトで値のセットされていないプロパティは、現在それぞれが持っている初期値を返すようになっている。もしz-indexなどCSSプロパティが従来の初期値の状態に依存していた場合に問題を引き起こす。これはASP.NETのメニューコントロールに付随したトラブルの原因となる」。

var zIndex = elm.currentStyle.zIndex; 
if(zIndex == 0) { 
    // custom code 
}

解決方法: 従来と互換性を持つ値、ならびに標準に準拠した初期値の両方で動作するように見直す。

var zIndex = elm.currentStyle.zIndex; 
if(zIndex == 0 || zIndex == "auto") { 
    // custom code 
}

Unspecified CSS Property Values

「スタイルオブジェクトの未定義プロパティは現在、DOM Level 2 Style Specificationに準拠した空の文字列を返すようになっている。明確に定義されていない値を持つz-indexのようなCSSプロパティがあった場合に問題を起こす」。

var zIndex = elm.style.zIndex; 
if(zIndex === 0) { 
    // custom code 
}」

解決方法: 従来と互換性を持つ値、ならびに空の文字列の両方の値で動作するように見直す。

var zIndex = elm.style.zIndex; 
if(zIndex === 0 || zIndex === "") { 
    // custom code 
}

Attributes Collection

「Attributes Collection(アトリビュートコレクション)においては、すべてのアトリビュートの組み合わせがIEでは認識されるわけではない。もしIE7では存在していたアトリビュートに依存していた場合、スクリプトがエラーを引き起こす可能性がある」。

var attr = elm.attributes["checked"]; 
// Potential script error in IE8 
return attr.specified;

解決方法: アトリビュートコレクションにすべてのアトリビュートが存在するとは考えず、まずその存在の有無を確認すること。

var attr = elm.attributes["checked"]; 
if(attr) return attr.specified; 
else return false;