2008-03-10

IE7 を含むモダンブラウザ向けの CSS ハックまとめ

Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハック比較的シンプルかもです。
想定ブラウザは下記のとおり。

ブラウザごとのハック

全てのサンプルは body 要素を指定の対象としている。

バージョン6以下のIEにのみ適用
* html body

バージョン7のIEにのみ適用
*+html body

バージョン7を含む全てのIEにのみ適用
*+html body, * html body

IE7を含むモダンブラウザにのみ適用(バージョン6以下のIEを除外)
html>body

IE7を除くモダンブラウザにのみ適用
html>/**/body

上記IE7向けのハックは、あくまでbeta2でのものですので正式版では使えなくなっている可能性もあります。

その他、ブラウザ振り分けに使えそうなハック

対象要素に属性があれば、属性セレクタを使ったハックなんかも使える。例えば、下記のような要素を対象としてみる。

<p class="foo" id="bar">...</p>

IE6 以下を弾きたければ、CSS3の属性セレクタを使って p[id$="bar"]{...} とすれば良いかもしれない。さらに IE7 も弾きたければ、否定擬似クラスを使って p[id$="bar"]:not([class="hoge"]){...} とか。
ただ、これだとOpera9も弾かれてしまうので、CSS3のMedia Queries使って@media screen and (min-width: 0) {p[id$="bar"]{...}} って感じで上書きさせれば大丈夫。

Bookmark

AddThis Social Bookmark Button