ＣＳＳ概要編
-5 ブラウザの実装と互換性
ブラウザ間の違い
Webの世界は変化が非常に速いので、ある時点で完璧なサイトを構築しても、時間と共に要求に応えられなくなってしまうことがあります。
現在は ユーザビリティ・アクセシビリティ・ＳＥＯなど様々な概念がまだ整理されずに複雑化した状況にあるといわれています。
ブラウザによる解釈・表現の差違も大きいのです。
このような過渡期ともいえる時期は、拡張可能でメンテナンスしやすいページデザインの仕組みが より必要となるでしょう。
今までCSSによる表現が躊躇されていた一番の理由は、上述したブラウザによる表現の差違があることです。
自動車のエンジンがメーカーごとに異なることと同様に、各ブラウザに搭載されているレンダリングエンジンが おのおののブラウザによって異なっています。
ブラウザの解釈の違いというのは、データを計算し可視化すること、つまりテキストや画像、レイアウトなどを表示するこの仕組み＝レンダリングエンジンの処理が違うということです。
具体的にいうと、(X)HTMLの要素や属性、CSSのプロパティや値など、サポートの状況が各ブラウザごとに異なっています。
これらブラウザの「実装差異」により、Web標準上正しい書式であっても 適切に解釈してもらえないという問題点が多々発生しています。
ブラウザの実装差異
ブラウザの違いについて分類すると、Internet Explorer（以降IE）3とIE4、およびNetscape Navigator（以降NN）4は CSS対応をうたった最も古いブラウザ、レガシーブラウザ（Legacy Browser）と言われています。
ちなみに、それ以前のバージョンはそもそもCSSに対応していません。
しかし、これらレガシーブラウザは、CSS対応ではあるものの多分に表示不具合がでるので、ページ作成時に CSSの適用対象から外すことが多いようです。
その後 2000年以降に登場した新しいブラウザ（IE5以降、NN6、Mozilla、Firefox、Opera、Safariなど）はモダンブラウザ（Modern Browser）と呼ばれ CSSをフルサポートしています。
古いバージョンのブラウザをほぼ無視できるぐらいのシェアも確保されています。
しかし、このモダンブラウザの中でも、前述した解釈の差違があります。
また、Web標準上定義されていないブラウザ独自の要素などが実装されており、作成者はこの「独自拡張」にも注意を払う必要があります。
サイトの目的やユーザーターゲットをWeb標準準拠環境のみに絞り込み、これらブラウザが持つ「バグ」による表示の乱れなども割り切って無視してしまうという選択もあります。
ですが、モダンブラウザでありながら、特に問題の多いIE5およびIE6のシェアを考えると、単にバグと放置するわけにはいきません。
IE6は現時点（2006年1月）で全ブラウザの約８割のユーザーシェアを占めていますので、常に最新・最先端の環境を想定して作成すると、これら大多数のユーザーに対し 想定した効果を伝えることができないのです。
上図赤字のブラウザ群が、使用ユーザーが集中していて 且つ Web標準に準拠しきれていない点の多い環境と言えます。（バグの詳細内容についてはここでは省きます。）
互換性の考え方
このようなブラウザ間の差異に左右されないページ表示のために、「古いブラウザでも問題なく表示され、安定して動作すること」を念頭に置いた「後方互換性」が用いられてきました。
「後方互換性」とは、勧告されている仕様では非推奨とされている要素や属性で(X)HTML文書を記述したり、なるべく古いバージョンのCSSプロパティを使用したり、といった姿勢です。
しかし、この姿勢では、前述した文書構造と視覚表現の分離が徹底できない、アクセシビリティの確保が難しい、などといった問題が生じるのです。
そこで、「今後新たなブラウザや入出力装置が開発されても、現在のページが問題なく表示され、安定して動作すること」を目指す「前方互換性」という考え方が生まれてきます。
具体的には、従来のテーブルレイアウトで骨組みをした上で、デザイン的要素をCSSで作るという「ハイブリッドデザイン」の採用などが挙げられます。
この手法ですと、ブラウザ間の表現差異に大きく左右されることはなく、後々の完全な標準準拠ページへの移行も非常に簡易です。
表示モードの選択
また、モダンブラウザの多くは 複数の表示モードを備えています。
WIN版IE6、NN6などでは、「標準準拠モード」と「互換モード」の２種類が、Firefox、Safariなどでは、「標準準拠モード」「ほぼ標準準拠モード」「互換モード」の３種類が備えられています。
ここで、「標準準拠モード」に準拠したページを作成すれば おおむね全ブラウザ均一の表示が実現できます。
これは (X)HTML文書内の文書型宣言の書き方や文書型定義の種類によって指定されます。
サイト趣旨に合ったモードを選択・指定して作成にあたります。
例えば当サイトの場合の考え方を例に挙げますと、まず当サイトが目指すものは、「Web標準に準拠しさえすればいいというもの」ではなく、「より多くのユーザー環境に適したもの」です。
ですので、その相反する要素を満たすためには「XML宣言の記述はせずXHTML1.0Transitionalを指定した構造にCSS2の仕様で表現をコントロールする」という手法選択になります。
「XML宣言」というのは、XHTML文書の仕様上強く推奨されているものです。
しかし、前述した通り、格段のブラウザシェアを誇るIE6に、このXML宣言のある文書は「標準準拠モード」を採用しないという実装不備があるのです。
テストしたところXML宣言をすると、IE6では意図した標準準拠の効果が反映されませんでした。下図がその一例です。
モードに左右されないデザインなら問題はないのですが、意図したデザインではモードによる表現差異が大きかったため、「XML宣言の記述はせず…」という形式を取らざるを得ませんでした。（裏ワザを使ってこのIEのバグに対応する方法はあります。つまり、推奨通りXML宣言することは当ページでも可能です。：訂正文挿入）
「XHTML1.0Transitionalを指定した構造」というのは、厳密な型(Strict)を採用すると 非推奨とはいえ現在定着している要素（例：iframe等）が使用できなくなるので、移行型であるTransitionalで互換性を確保するために選択した文書型です。
「CSS2の仕様で表現をコントロールする」というのは、バラエティに富んだ表現を志向したいのでCSSを使用するという意味で、そこに発生するブラウザ差異等の問題には 後述する「CSSハック(過渡的な裏ワザ)」で対処するという方針を取りました。
つまり、「Web界の流れを考慮に入れつつ、その流れとは食い違いのある現状のユーザー環境に適合していく」という手法を模索することになります。
しかし、これはあくまでも当サイトの考え方であり、また ほんの一例に過ぎません。
おのおののサイト発注者と制作者によって、この過渡的な時期における制作指針が協議されていくべきでしょう。
