2008.10.17
CSSとブラウザと
ブラウザといえば昔はIEの独壇場だったわけですが、
最近はFireFoxがシェアを伸ばし、GoogleからはChromなんてものも出て、
クロスブラウザなんて言葉を気にしなければならない時代になってきました。
今回はそんなお話です。
まずは、世の中で使われている主なブラウザとそのシェアから。
W3Counterの集計によると、最新の状況は以下の通り。
———————–
IE7 28.8%
IE6 28.2%
Firefox2 18.7%
Firefox3 11.4%
Safari 2.5%
Opera 1.6%
———————–
結構IEがFirefoxにシェアを食われています。
ちなみに弊社運営のBB Planetだと、IEのシェアが80%弱、Firefoxが15%強と、IEがかなりがんばっています。
まだまだビジネスユーザはIEを使っている方が多いのでしょう。
で、このIEとFirefoxですが、CSSの解釈に結構大きな違いがあります。
有名なところを挙げると、
border/padding/width(height)の解釈の違いでしょうか。
例えば、CSSで
————-
border:10px;
padding:10px;
width:100px;
————-
と設定すると、
Firefoxでは左のようにきちんとと表示されるのに対して、
IEでは右のように、border+padding+widthで100pxになるようにレイアウトが組まれてしまいます。
これだとIEでぴったりになるように作ったのに、Firefoxだとはみ出したり、レイアウトが大きくずれてしまったり、ということが起こってしまいます。
このようなブラウザごとの独自の解釈を避けるために、最近のブラウザには「標準モード」と「互換モード」という2つのモードが搭載されており、これを切り替えることにより、ある程度CSSの解釈をコントロールすることが可能になります。
ちなみに、
標準モード…W3Cの勧告するCSS標準に基づいた解釈をするモード
互換モード…以前のバージョンとの互換性を持たせたモード
となっています。
IEはかなり独自の解釈をして動いているので、「互換モード」で動かすと、上記のような事態が発生するわけです。
ではどうやって標準モードで動かすのか。
実は、HTMLの一番最初に宣言する
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”"http://www.w3.org/TR/html4/strict.dtd”>
この一文が、モード切替のスイッチになっています。
“-//W3C//DTD HTML 4.01//EN”
の部分を「公開識別子」と呼び、
この文法を記している文書の置き場を示した、
“http://www.w3.org/TR/html4/strict.dtd”
の部分を「システム識別子」と呼びます。
HTML4.01では公開識別子は、
——————–
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
——————–
の3種類が準備されており、システム識別子はそれぞれに1つずつ対応しているのですが、
宣言文に入れないことも可能です。
で、それぞれの宣言が、どのモードに対応しているのか、という表が以下。
|
ブラウザ |
システム 識別子 |
IE6 |
IE7 |
Firefox2 |
Firefox3 |
Safari |
Opera |
|
HTML4.01 Strict |
あり |
標準 |
標準 |
標準 |
標準 |
標準 |
標準 |
|
なし |
標準 |
標準 |
標準 |
標準 |
標準 |
標準 |
|
|
HTML4.01 Transitional |
あり |
標準 |
標準 |
標準 |
標準 |
標準 |
標準 |
|
なし |
互換 |
互換 |
互換 |
互換 |
互換 |
互換 |
|
|
HTML4.01 Frameset |
あり |
標準 |
標準 |
標準 |
標準 |
標準 |
標準 |
|
なし |
互換 |
互換 |
互換 |
互換 |
互換 |
互換 |
多くのブラウザが標準モードで動くように宣言するのがポイントです。
ただ、それでも細かい解釈の違いは色々と出てきますので、
結局のところは根気強い対処が必要になってきます。
クロスブラウザなサイト作りには根気が必要なようです。
ちなみにXHTMLになってくると少し話が変わってくるので、それはまたの機会に。。。
[...] ２．width/heightの解釈の違い。前回のブログにも詳細が書いてあります。jQueryのwidth()/height()でもその違いは吸収できません。前回のブログにあるように、DOCTYPEをきちんと指定するしかないようです。 [...]
Posted at 2008.11.10 11:18 AM by » jQueryでもはまるクロスブラウザ問題まとめ: エスキュービズム ラボ Blog