IE9、IE8、IE7 - クロスブラウザコーディングテクニック

IE9はこれまでのIEシリーズの中でもっともほかのブラウザと互換性の高いブラウザになる。WebデベロッパやWebデザイナにとってはやく訪れてほしいブラウザとなるが、Chromeのように強制アップグレード方式を採用していないIEは、今後も長期に渡ってIE8、IE7、IE6との互換性も考慮したコーディングを要求されることになる。

こうした場合に使えるコーディングテクニックがIEBlog : Same Markup: Writing Cross-Browser Codeにおいて紹介されている。実際にIE9、IE8、IE7などに適用できる例をともに説明があり参考になる。紹介されているコーディングテクニックは次のような内容。

クロスブラウザコードを記述するときのベストプラクティス
ページの振る舞いを決めるためにブラウザを特定するようなことはしてはいけない。
機能の検出を行うことなく機能を使うということをしてはいけない。
ひとつの機能チェックで、ほかの機能がサポートされているかどうかを推測して利用してはいけない。
機能を利用する前に、ブラウザがその機能をサポートしているかどうかをチェックする。
回避方法を適用する前に、既知の問題があるかどうかをチェックする。

【ブラウザを検出する例 - 推奨されていない】

// [TR] Different listeners added for illustration
function f1() { document.write("addEventListener was used"); }
function f2() { document.write("attachEvent was used"); }


// DON'T USE THIS: Detecting specific browsers
if(navigator.userAgent.indexOf("MSIE") == -1) {
    window.addEventListener("load", f1, false);
} else {
    window.attachEvent("onload", f2);
}

【機能を検出する例 - 推奨されている】

// [TR] Different listeners added for illustration
function f1() { document.write("addEventListener was used"); }
function f2() { document.write("attachEvent was used"); }


// Use this: Feature Detection
if(window.addEventListener) {
    window.addEventListener("load", f1, false);
} else if(window.attachEvent) {
    window.attachEvent("onload", f2);
}

ブラウザを特定して処理を分岐させる方法は適用の幅に限界ができやすいという。分岐は機能に対して実施した方がいいと説明がある。また、ひとつの機能の有無からほかの機能の有無を推測するのはやめた方がよく、利用する機能はすべて実行する前にチェックした方がいいと説明されている。

この1、2年で特に多種多様なブラウザに対応するための基本的なテクニックであり考え方のひとつとして注目されるようになったものにプログレッシブエンハンスメントがある。これは、どのブラウザでも閲覧できるような基本的なHTMLでベースとなる部分とコンテンツ部分を組み上げ、これに対してブラウザごとに機能や効果を追加していくというもの。IEBlog : Same Markup: Writing Cross-Browser Codeて紹介されているベストプラクティスは、プログレッシブエンハンスメントの拡張部分を、ブラウザごとに判別せずに、そのブラウザがサポートしている機能を機能ごとに拡張するといったやり方として応用できる。