Firefox IEの表示の違い　「CSSハック」で解決-Dig*Dag

CSSハックとは？

「Firefox IEの表示の違い　クロスブラウザ、ブラウザ互換」の記事の中で、
「ブラウザごとに異なる表示モードが適用されることを前提にデザインする。
（CSSハックを利用してクロスブラウザを目指す）」と紹介しました。

「CSSハック」とはブラウザの実装不備や実装差異を利用して、
CSSの適用対象から一部のブラウザを外したり、特定のブラウザのみを対象にCSSを適用する方法の事です。
CSSハックの一部はCSSの書式上正しくないものもある。
あくまで緊急避難的な方法として使用しましょう。

有名なCSSハック

「CSSハック」は数多く存在します。
少し検索すれば数え切れないほどのCSSハックを見つけられると思います。
ここではCSSハックの有名所を紹介します。

CSSハックの対象としたいブラウザは人それぞれだと思います。
例えば僕はFirefoxを基準にCSSを書いているので、IEをCSSハックするのを考えます。
そう考えればたくさんのCSSハックを覚える必要もないので、基準とするブラウザを決めておくのもいいかもしれません。

スターハック

セレクタの前に「*html」をつけると、Win　IE4〜6、Mac　IE4〜5などでスタイルが適用され、ほかのブラウザでは表示されない。

*html h2{color:red;}

アンダースコアハック

プロパティの先頭にアンダースコア（_）をつけるとWin　IE4〜6などでスタイルが適用され、他のブラウザでは適用されない。

h1{_color:red;}

ハッシュハック

プロパティの先頭にシャープ（#）をつけるとWin　IE4〜6、MacIE5、Mozilla、Firefoxなどでスタイルが適用され、他のブラウザでは適用されない。

h1{#color:red;}

スター７ハック

セレクタの前にhtml*をつけるとWin　IE5.5〜6、Mac　IE5、Safariなどでスタイルが適用され、他のブラウザでは適用されない。

html*h1{color:red;}

xmlns属性ハック

属性セレクタを利用し、html要素につけるxmlns属性をスタイル適用のための分岐にする方法。
Mozilla,Firefox,Opera7/8,Safariなど、属性セレクタをサポートしているブラウザでスタイルが適用され、他のブラウザでは適用されない。

html[xmlns]h1{color:red;}

もちろん他にもたくさんあります。
僕がCSSハックしたいのがIEなので、IEを対象とするものばかり紹介してしまいましたが・・・。
クロスブラウザを目指すなら覚えておきたいCSSハック。
色々探してみてください。

• 前の記事：「レンタルDVDに欲しいもうふた工夫」
• 次の記事：「Firefox IEの表示の違い　クロスブラウザ「ブラウザ互換 DTD」とは？」

Comments

What say you?

Track backs

http://digdagdig.blog117.fc2.com/tb.php/111-cf98055c

この記事にトラックバックする(FC2ブログユーザー)