こんにちは，太田です。第1回は各ブラウザの特徴をまとめ，第2回は環境作りについて解説したので，ようやく今回からクロスブラウザの本題に入っていきます。まずはクロスブラウザ対応のパターンを整理し，そのパターンごとの対策をまとめます。

クロスブラウザとはなにか

そもそも，クロスブラウザ対応とはどういうことでしょうか？ここで，この連載におけるクロスブラウザの定義を決めておきます。

サポート対象のブラウザで設計通りの表示・動作をして，たとえ未知のブラウザであっても，そのブラウザがWeb標準に沿っているなら最低限の表示・動作をすること

サポート対象のブラウザについては第1回で解説した通りですが，メインターゲットはIE（6/7/8⁠）⁠，Firefox（3.6⁠）⁠，Chrome（4.1⁠）⁠，Safari（4.0.5⁠）⁠，Opera（10.51）とします。カッコ内はフルサポートするバージョンで，それ以外は最低限の確認のみを行います。

設計通りの表示・動作というのは，文字通りではありますが，あえて「同じ見た目」とは表現していません。例えば，WindowsとMacではフォントなどのベースとなる環境が異なるため，まったく同じ見た目を再現することは難しいといえます。フォントの違いは文字をすべて画像にしてしまうことで統一できますが，そもそも（特にこの連載では）ブラウザ間で見た目をまったく同じにしなければいけない理由がありません（むしろ，ブラウザごとに個性を出しても良いくらいです⁠）⁠。

そして，未知のブラウザへの対応はこの連載におけるキーポイントだと考えています。未知のブラウザとは，サポート外としたブラウザや，IE 9やFirefox 4などの未リリースブラウザ，今後登場するかもしれないまったく新しいブラウザなどを含みます。それらのブラウザがHTML（4.01，5）やCSS（2.1，3）にDOM（level 2，3⁠）⁠，ECMA-262などのWeb標準といわれる仕様に準拠しているのであれば，正常に表示・動作できるようにすることが目標です。確認した限りで動いていればOKということにはせず，将来を見据えることを課題とします。100%の正解の無いテーマですので，実際には当てが外れてしまうこともあるかもしれませんが，その点はご了承ください。

では，実際にクロスブラウザ対応にどういったパターンがあるのか見ていきます。

パターン1：標準準拠

前述の通りWeb標準関連だけでも多数の仕様が存在します。上であげたもの以外にもRFCのHTTPやCookie関連の仕様にも留意する必要があります。

Firefox，Chrome，Safari，Operaなどのブラウザに限定すれば，標準仕様に準拠するだけでクロスブラウザ対応ができてしまうことも珍しくありません。さらに前述のとおり，Web標準に準拠することで未知のブラウザにも対応できることが期待できます。よって，この連載では標準仕様への準拠を重要なテーマとしています。

しかし，現実には実装の前に仕様を正しく理解するという過程が必要となるので，その点をクリアすることが難しいことも多々あります。また仕様に対する解釈がブラウザごとに微妙に異なることがあったり，実装後に仕様のほうが変更されて齟齬が生まれていたり，そもそも仕様とは異なる実装が普及していたりすることもないわけではありません。そのため，なるべく仕様を優先しつつ，実装にあわせて調整するというプロセスが必要となります。

以下はDOM Level 2 Eventsに準拠したサンプルコードです。これはFirefox，Chrome，Safari，Operaはもちろん，DOM Eventsをサポート（一部のみ）するIE 9のPreview版でも動作します。

window.addEventListener('load',function(){
  var form = document.getElementById('userform');
  form.addEventListener('submit',function(evt){
    if (!check()) {
      evt.preventDefault();
    }
  },false);
  function check(){
    // 
  }
},false);

パターン2：未実装・独自実装

主にIEで多いのがこのパターンです。当然ですがIE以外でもバージョンが古いほど未実装に当てはまることが多くなります。具体例を挙げると，IE 6は透過PNGの透過部分を正しく表示できませんが，AlphaImageLoaderを使うことで正常に表示させることができます。ほかにも要素を画面内に固定表示したい場合で，IE 6はposition:fixedをサポートしていないので，同様の動作をJavaScriptで実装する必要があります。またIEやSafari 3.0.4はDOMContentLoaded（ページの読み込みの完了を待たずに，DOMが構築された段階でJavaScriptの処理を開始させることができるイベント）をサポートしていないので，代わりの処理が必要となります（IE 9ではDOMContentLoadedをサポート予定です⁠）⁠。このようにブラウザの機能不足を主にJavaScriptなどでサポートする必要があります。

第1回でも紹介したイベント処理用のaddEvent関数は標準準拠と独自実装の組み合わせです。DOM Level 2に準拠したブラウザではaddEventListenerを使用し，IE 6～8ではIE独自実装のattachEventを使用します。

var addEvent;
if(document.addEventListener) {
  addEvent = function(node,type,handler){
    node.addEventListener(type,handler,false);
  };
} else if (document.attachEvent) {
  addEvent = function(node,type,handler){
    node.attachEvent('on' + type, function(evt){
      handler.call(node, evt);
    });
  };
}