ブラウザ毎のcssハック術

自分記事でも記述しているのだが、今一度まとめようと思う。

HTML/CSSコーダーさんやウェブデベロッパーの皆さんは、ブラウザ毎のCSSハック術は実作業の中では必要性を感じることがあるのではないだろうか。

全てのブラウザが表示エンジンを統一しない限りは、一つのCSS記述で全てのブラウザで全く同じ様に表示されるのは不可能であろう。
また、お客さんのサイトや自社内のサイトでは上記に反して、全てのブラウザで同じように表示されることが望まれる。

ジレンマだ・・・

そんな苦痛からのストレスでハゲ散らかしている筆者であるが、以下にIE6、IE7、FireFox、Safari/Chrome、OperaのそれぞれのブラウザCSSハック方法をまとめたので、必要なときに使ってもえたらうれしい。

※ハック術には下記に示したもの以外にも方法があるが、私が考えるもっとも簡単だと思えるものを載せさせてもらった。

デベロッパーの方は、できる限りコードを簡略化したい生物である。
できる事なら、コード数が増えるハックは使いたくないが、まぁ、時間に制約がある上に、自分の髪の毛の残量にも上限があるので、ハックはもちろん多用するべきではないが、使わない手は無い。

Internet Explore 6

まずはじめに、私の嫌いなIE6から紹介しよう。
プロパティーの前に「_」（アンダースコア）を入れるだけ。

#selector {
 property: value;
 _property: value; /*** IE6 ***/
}

Internet Explore 7

お次はIE7。
プロパティーの前に「*」（スターマーク）を入れるだけ。

#selector {
	property: value;
	*property: value; /*** IE7 専用 ***/
	_property: value; /*** IE6 専用 ***/
}

FireFox 2

FireFox 2、またはFF2以下のブラウザCSSハックは、Geckoエンジンを利用する。

#selector, x:-moz-any-link {
	property: value;
}

FireFox 3

FF2とFF3のハックをまとめるとこんな感じ。

/*** FF2 専用 ***/
#selector, x:-moz-any-link {
	property: value;
}
/*** FF3 専用 ***/
#selector, x:-moz-any-link, x:default {
	property: value;
}

Safari と Google Chrome

SafariとChromeは同じWebkit表示エンジンを利用しているので、同じ様に表示される。
その為、ハックも一つで済むはず。

body:nth-of-type(1) #selector {
	property: value;
}

Opera 9

オペラは通常、スタンダード表示モードがうまく動くのでハックは必要ないが、必要なときも出てくる。
残念ながら、綺麗なOpera専用のハック術を見つけることはできなかったが、Opera、SafariやChromeをターゲットとして記述し、その後にSafariなどのWebkitを利用しているブラウザ専用にCSS設定の上書きする方法で対処することが可能。

/*** Opera、Safari、ChromeなどのWebkitブラウザへのハック ***/
@media screen and (-webkit-min-device-pixel-ratio:0){
#selector {
	property: value;
}
/*** Safari、ChromeなどのWebkitブラウザやFF3.5へ上書き ***/
body:first-of-type #selector {
	property:value;
}