インターネットの２大ブラウザ・Netscape Communicator と Internet Explorer はそれらの最新バージョン・Version4.0xにて共にDynamic HTMLをサポートしています。しかし、ここで大きな問題が・・両ブラウザのDHTMLプログラムには互換性がほとんどないという問題があります。

やはり、私を含めほとんどのホームページ作者はより多くの人に楽しんでもらえるホームページを目指していると思いますので、両ブラウザで同じように動く、Dynamic HTMLページを望んでいると思います。
この工作室では、当ページで適用した、クロスブラウザのサンプル集と解説を行うつもりです。

■Dynamic HTMLの特徴

1. Style Sheetで、コンテンツの自由なポジショニングが可能なため、かなり洗練されたデザインのコンテンツを作成出来ます。
2. 今までよりインターラクティブで、きめ細かなホームページの製作が可能です。
3. 文字の大きさやレイアウトなど、ブラウザの違いを意識せずに表示をHP作成者の意図に合わせてコントロールすることが可能になります。
4. HTML自身に記述するため軽く、JAVAや、プラグインなどの技術を使わずに、比較的容易に動的コンテンツが作成できます。

ところが、 NC4.0 及び IE4.0 以降は StyleSheet と レイヤーを中心として CGI 等を使用せずダイナミックな動きや表現を演出する「Dynamic HTML」を前面に出した、 両社独自仕様の JavaScript を公開・実装したため、「Cross Browser」は非常に難しい問題となりました。

特に問題となるのは、両社の実装した新機能が非常に異なるために、両者を吸収する仕組み作りがホームページ作成者の課題となったこと、及び、StyleSheet とレイヤーの実装により、 古いバージョンのブラウザとの共存自体が事実上困難になったこと、ではないでしょうか。

1. DHTML は IE4.0 又は NC4.0 以上のみでしか通用しない。
2. DHTML は Style Sheet と JavaScript1.2 が必須で、JavaScript1.2 は Microsoft社 と Netscape社 で実装がかなり異なり、互換性の問題がある。
3. IE4.0・NC4.0 で共に動作する DHTML が存在する。これを一般には「Cross Browser Dynamic HTML」と言います。

■ブラウザの判定
互換DHTMLを作成するにあたって、NC4、IE4などの4.0バージョンのブラウザ間の違いを意識せずにDHTMLスクリプトを書けるようにするために、NC4、IE4かをスクリプト内で分岐する必要があります。

また、DHTMLやJavaScriptを使えない旧バージョンに対応するときにはブラウザやバージョンなどによって処理を分岐する方法も必要になります。
(1、2項のスクリプトは「だれでもカンタンDynamicHTMLサンプル集」から引用しました。)

1. オブジェクトの有無を調べる

   ＜例１＞
   if(document.layers||document.all){
   	//DHTMLを使える場合(NC4,IE4用)の命令をここに書く
   } else {
   	//DHTMLを使えない場合の命令をここに書く
   	alert('NC4かIE4以上でみてね^^;;')
   }
   

   ＜例２＞
   (1)layers
     if(document.layers){
       //layersが使える場合(NN4用)の命令をここに書く
     }
   (2)all
     if(document.all){
       //allが使える場合(IE4用)の命令をここに書く
     }
   (3)images
     if(document.images){
       //imagesが使える場合(NN3,IE4[Mac版はIE3]以上用)の命令をここに書く
     }
   (4)opener
     if(document.opener){
       //openerが使える場合(NN2,NN3,IE4[Mac版はIE3]以上用)の命令をここに書く
     }
   

2. ブラウザとバージョンを調べる

   var brwsr=(navigator.appName=="Netscape"||navigator.appName=="Microsoft Internet Explorer")
   var ver=(navigator.appVersion.charAt(0)>=4)
   var dhtmlbrwsr=(brwsr||ver)
   if(dhtmlbrwsr){
   	//DHTMLを使える場合(NC4,IE4以上用)の命令をここに書く
   } else {
   	//DHTMLを使えない場合の命令をここに書く
   	history.go(-1)  //前のページへ戻す
   }
   

3. JavaScript未対応、JavaScript設定「無効」ブラウザのために <NOSCRIPT> <!--JavaScript未対応、JavaScript設定「無効」ブラウザ用のメッセ−ジ--> <font color=red> せっかくご来訪戴きましたが、ご覧のブラウザではこれより先をご案内することが出来ません。 </font><p> <font color=blue> （１）Netscape Ver2.0 または MSIE Ver3.0 以上の機能を有するブラウザを入手されるか<br> （２）上記以上のブラウザをお使いの場合は、JavaScriptの設定を「有効」にして </font><p> 再度ご来訪下さいますようお願いいたします。 </NOSCRIPT>