【XHTML＋CSS】06_CSSデザインのブラウザ調整

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

ブラウザでの表示確認と調整の流れ

Windowsマシンには複数のバージョンのIEをインストールすることはできないので、MultipleIEsなどのスタンドアローン版や、IETesterなどのシミュレーターなどの環境を整えておく。

IEのCSSサポートを強力にする「IE7.js」「IE8.js」

どちらもGoogle Codeで配布されているライブラリ。

IE7.js

IE6とIE5を、IE7並のWeb標準サポートにするライブラリ。head要素内にscript要素を指定し、Javascriptファイルを読み込む。

1
2
3

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

IE8.js

IE7、IE6、IE5を、IE8並のWeb標準サポートにするライブラリ。head要素内にscript要素を指定し、Javascriptファイルを読み込む。

1
2
3

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

利用する場合の注意点

JavaScriptファイルは配布サイトから直接読み込んでも、ダウンロードして利用しても構わない

JavaScriptがオフの環境では動作しない

IE7.jsとIE8.jsの両方を同時に使用することはできない

透過PNGは「○○-trans.png」というファイル名で保存すると、透過が有効になる

サポートしているCSS3セレクタなどはIE7 Test Pageで確認

Firefox3用ハック

Firefox3のみにスタイルを適用するには、次のように記述する。

1 2	セレクタ, x:-moz-broken {Firefox3に対するスタイル} セレクタ, x:x {正規のスタイル}

2行目は、Safari2など一部未対応ブラウザを無視するため、それを避ける（正規のスタイルで上書きしておく）ための指定。

Firefox2用ハック

Firefox2以下にスタイルを適用するには、次のように記述する。

1
2
3

セレクタ, x:moz-read-only {Firefox2に対するスタイル}
セレクタ, x:-moz-broken {正規のスタイル}
セレクタ, x:x {正規のスタイル}

1行目はFirefox3にも適用されてしまうため、2行目にFirefox3用ハックを指定し、正規のスタイルで上書きしておく。3行目は、Firefox用ハックと同じ。

Safari3/Google Chrome用ハック

Safari3とGoogle Chromeのみにスタイルを適用するには、次のように記述する。

1	html:not(:only-child:only-child)セレクタ{ }

また、次のハックも利用できる

1
2
3

@media screen and (-webkit-min-device-pixel-ratio:0) {
　セレクタ { }
}

Google ChromeはSafari3と同じレンダリングエンジン（Webkit/KHTMLベース）を使用しているので、このような共通ハックとなる。

Safari2用ハック

Safari2のみにスタイルを適用するには、次のように記述する。

1 2	html[xmlns*=""] body:last-child セレクタ {Safari2に対するスタイル} html:not(:only-child:only-child) 適当なIDセレクタセレクタ {正規のスタイル}

1行目だけだとSafari3/Google Chromeにも適用されてしまうので、2行目でこれらのブラウザに対するスタイルを指定して上書きしておく。2行目で適当なIDセレクタを指定する理由は、指定しないと詳細度が1行目よりも弱く、上書きされないため（例えば#containerなど）。

Opera 9.50以降用ハック

Opera 9.50以降のみにスタイルを適用するには、次のように記述する。

セレクタ[属性名*="属性値"] {Opera9.50以降に対するスタイル}
;;body セレクタ {正規のスタイル}
/*¥*/
html* セレクタ {
　正規のスタイル
　先頭に「」をつけたOpera9.50以降に対するスタイル
]/**/
セレクタ, x:-moz-broken {正規のスタイル}
セレクタ, x:moz-read-only {正規のスタイル}
セレクタ, x:x{正規のスタイル}

純粋にOpera9.50以降にのみスタイルを適用させるハックがないため、他のブラウザに影響しないように、正規のスタイルで上書きを繰り返す複雑な書き方になっている。

Opera9.50未満用ハック

Opera 9.50未満のみにスタイルを適用するには、次のように記述する。

1	;;body セレクタ { }

IE8用ハック

IE8のみにスタイルを適用するには、次のように記述する。

1	html:first-child セレクタ{ }

Operaの古いバージョンにも適用されてしまうが、Opera9.5以降には適用されないので問題ない。

IE7用ハック

IE7のみにスタイルを適用するには、次のように記述する。

1	*:first-child+html セレクタ{ }

IE6用ハック

IE6のみにスタイルを適用するには、次のように記述する。

1	*html セレクタ{ }

スターハックという有名なハックで、厳密にはIE5シリーズにも適用される。IE5シリーズもターゲットブラウザに含める場合には、調整用スタイルすべてに「*html」をつけ、IE6用ハックよりも詳細度は低くならないようにする。

条件コメントを使う方法

Windows版IE5.0からは条件コメントという独自機能を実装しており、CSSの調整用に利用することができる。XHTMLのコメント記法にもとづいているため、他のブラウザでは単なるコメントとして無視される。

たとえばIE7のみにCSSファイルを読み込ませる場合

1
2
3

<!--[if IE 7]>
　<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]>

また、CSSのソースコードを直接書いたり、XHTMLやJavascriptのソースコードを書くこともできる。
Mac版IE5には実装されていない。IE5.5を指定する場合は「IE5.5000」と書かないと機能しない。

特定のバージョン以上

IE7以上でCSSを読み込む場合

1
2
3

<!--[if gte IE 7]>
　<link rel="stylesheet" type="text/css" href="css/ie7-8.css" />
<![endif]>

特定のバージョン未満

IE7未満でCSSを読み込む場合

1
2
3

<!--[if lt IE 7]>
　<link rel="stylesheet" type="text/css" href="css/ie6-5.css" />
<![endif]>

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ！

返信をキャンセルする。