Web標準とCSSハック
2008.06.13 Posted by Tanaka
突然ですが、皆さんは何のブラウザをお使いでしょうか？
Internet Explorerですか？それともFireFox？
MACをお使いの方ならSafariでしょうか？
たくさんのブラウザが存在しますが、それぞれによってページの見え方が異なります。
ページをきちんとデザインし、レイアウトしたとしても他のブラウザでレイアウトが崩れていることはよくあります。
特に、Internet Explorer（以下IE）6は、他のブラウザとの違いが大きくでてしまいます。
ちなみに現在のブラウザ使用率は世界シェアでは
- Microsoft IE 85.81%
- Mozilla Firefox 11.69%
- Apple Safari 1.64%
- Opera 0.58%
- Netscape 0.13%
Vistaの普及率がいまいちということもあり、IE7ではなくIE6を使っているという方も未だ多くいます。
ではIE6のなにが問題なのでしょうか？
当社のサービスの中にもある「Web標準」（W3Cの仕様に準拠して）のXHTML＋CSSで制作を行う場合、HTMLのソースの一番先頭にXML宣言↓
|
1 |
<?xml version="1.0" encoding="Shift_JIS"?> |
を記述し、次に文書型宣言↓
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
を記述しなければなりません。
しかしIE6のバグで文書型宣言の上に文章が存在する場合後方互換モードとなってしまいます。
後方互換モードとはIE6の仕様に準拠していない古いブラウザ（IE5.～以前）との互換を目的とした表示モードです。
つまりIE6では、W3Cの仕様に準拠したページを制作するとIE5以前の古いページと認識されてしまうのです。
実際にどんな違いがあるかはこちらで
http://www009.upp.so-net.ne.jp/custom/kouhou.html
http://adp.daa.jp/archives/000265.html
IE7ではこの問題も解決されてるようですがVistaの普及率が伸び悩んでいるなか、まだまだIE6のこの問題を考えなくてはなりません。
IE以外にもそれぞれのブラウザによって表示が微妙に異なります。この違いを調整するためにCSSハックと呼ばれるブラウザのバグを逆手にとってブラウザごとにCSSの指定を変える技術が必要になります。
ブラウザ間に存在するCSSの解釈の違いは、
誰もが、どのブラウザでも、問題なくページを見られるようにするためには
大変厄介な問題です。
関連記事こちらの記事も合わせてどうぞ。
