ホームページの閲覧には様々なブラウザが使われています。 JavaScriptによる開発では古いバージョンも含め できるだけ多くのブラウザ(＝ユーザ) に対応することが望まれます。

しかしマイナーなブラウザに合わせた結果、 先進的な機能を使えなかったり或いは開発コストが増大するのも困ります。 どこかでうまく線引きしましょう。

ユーザ環境についての統計資料 Onestat.comの公開資料より

各ブラウザについて

IE4-6 IEは ビルド番号によって若干異なる場合もありますが バージョン間差異が小さいので対応はラクです。 通常 IE4向けに実装した機能はIE5,IE5.5,IE6でもそのまま動きます。

通常、IEで対応しているOSはWindowsかMacに限られます。 Windowsの普及率が97.46%に対しMacが1.43%であることを考えると 殆どがWindows版IEです。

Mac版IEでは「document.all」が使えるなど Windows版向けに書かれた スクリプトの多くはそのまま使えます。 しかしスタイルシートのfilter系機能や条件分岐コメントがサポート外など 内部的には別物です。

Netscape6/7/Mozilla Netscape6/7とMozilla及びその派生ブラウザは基本コードが共通しているため 同じ記述で動作します。 通常 Mozilla向けに書かれたJavaScriptはNetscape6+でも動作します。 その逆も真です。

Mozillaで対応するOSはWindows、Mac、Linuxなど幅広いです。 またIEとは異なり 稼動OSの違いによる動作の差異は少ないです。

行政など一部でLinuxを使おう！という動きが見られます。 しかしLinuxではIEはありません。 デフォルトのブラウザはMozillaになります。 そのためMozilla系にも対応しておいた方がいいでしょう。

Netscape4.x レイヤー、スタイルシート関係での様々なバグ、特殊な仕様のために 対応コストは高いです。

NS4でレイヤーを扱うには 他のブラウザとは異なる独特の方法が必要です。 また指定内容によっては予想外の動作をすることが多く このサイトで扱っているような特殊なノウハウが必要です。

NS4にはレイヤー関係を除いても膨大なバグがあります。 スタイルシートの指定が無視されたりテキストと画像が重なって 本文が読めなくなるようなケースも簡単に発生してしまいます。

NS4の使用率は 0.6%だそうです(2003/07/28)。 2003/12/16の発表では 1.1% なので使用率は順調に?!  降下しています。

そろそろIE3やNS3と同じ扱いでもいいと思われます。

NS4に対応するのは大変なので 内容が伝われば良しとするのが得策でしょう。 スタイルシートでは「media=all」指定でNS4にスタイルを読ませないことが出来ます。

同様にJavaScriptでは 提供する機能がページ内容の理解に不要だったらNS4非対応でいいでしょう。

Opera JavaScriptの開発から見た場合 「document.all」が使える、UserAgentを詐称するなど特徴があります。 デフォルトでは 「Mozilla/4.0 (compatible; MSIE 6.0; MSIE 5.5; Windows NT 5.0) Opera 7.0 [en] 」 などとなっており IEになりすましています。 その他「Mozilla5.0/4.78/3.0」にユーザが切替できてしまうため CGI等でUserAgent値を利用する時は注意。 まず文字列"Opera"の有無をチェックしましょう。

document.allが使えることから推察されるように JavaScriptについてIEとMozillaで実装が異なる場合は IE側に合わせるケースが多いです。 JavaScriptでは 「window.opera」の有無でUserAgentを使わずにOperaか否か分岐できます。

Safari MacではIEの開発が中止になったものの 新しいブラウザ「Safari」が登場しています。 UserAgentが「Like Gecko」となっていることから推察されるように 動作はMozilla系に近いです。

今のところ SafariはJavaScriptのキーイベント処理に対応していません。 このページ JavaScript@Keynavi.Netで扱っている KeyNavi内部の各個別関数は動作するものの キーを押しても動作しません。 将来 対応したら そのままKeyNaviが動作するかも。

その他のブラウザ IE3は外部JavaScriptファイルを読み込めません。 IE3非互換の記述は外部ファイルにすることができます。

いずれにせよこれらのブラウザでは大手サイトでもエラーが頻出します。 IE3,NS3以下をメインで使っている人は殆どいないので考慮外でいいでしょう。

互換性問題への対応方法

各ブラウザでの動作確認の工夫 上記で紹介した各ブラウザでの動作を各OSで確認するのは 大変骨の折れる作業です。 新たに追加した機能を 毎回 複数のPCを起動し確認するのは面倒なので １台のPCで複数のOSを起動できるVMwareやVirtualPCなどを使うといいでしょう。

JavaScriptでのブラウザ分岐 互換性の高いスクリプトを書くには 各ブラウザ毎に非互換の部分を分岐して別に処理します。

JavaScriptでの各ブラウザの判別は以下のようにして行います。 「if(window.opera)」が真ならOpera、 偽だけど「if(document.all)」が真ならIE、 「if(document.addEventListener)」が真ならMozilla系などと絞り込んでいきます。 稼動OSやその他細かい情報が必要な場合は 「navigator」属性から判定します。 詳しくは ブラウザ判別：KL_IE/NS/OP/MZ 。

初期バージョンには注意 工業製品と同じく ブラウザでも初期バージョンには特有の問題が発生しやすいです。

Netscape6.0はUserAgentにMozillaのバージョン番号(rv)が含まれないなど Netscape6.1以上と異なる部分があります。

何かと問題の多いNetscape4.xでは バージョン4.05以下で特有のバグが 幾つかあります。

ここまで古く且つ不安定なバージョンを使っているユーザは とても少ないと思われるので 通常は非対応でいいでしょう。