[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集

Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。

Documenting the Hacks: CSS Browser Targeting

CSSハックは使用しないに越したことはありませんが、必要がある場合には最小限簡潔に記述しておくようにします。
各ブラウザの新しいバージョンがリリースされた際、これらのハックが無意味なものになることも念頭においてください。

Internet Explorer 6

IE6のみに適用します。

#selector {
	_property: value;
}

Internet Explorer 7

IE7以下用を記述し、更にIE6用を上書きします。

/* Target IE7 and below */
#selector {
	*property: value;
}
/* Then overwrite for targeting IE6 specifically */
#selector {
	_property: value;
}

Firefox 2

Fx2のみに適用します。

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

Firefox 3

Fx2用を記述し、更にFx3用を上書きします。

/* Target Firefox 2 */
#selector, x:-moz-any-link {
	property: value;
}

/* Then overwrite for Firefox 3 specifically */
#selector, x:-moz-any-link, x:default {
	property: value;
}

Safari 3.0+

Safari3.1用ですが、CSS3を利用しているためFx3.5もサポートするでしょう。

body:first-of-type #selector {
	property:value;
}

Safari 3.1 and Google Chrome

Safari3.1とChriomeに適用します。ただし、これもFx3.5がサポートするでしょう。

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

Opera 9

Operaのみに適用するものは少し複雑になります。
OperaとWebkitブラウザ（SafariとChrome）用を記述し、WebkitブラウザとFx3.5用を上書きします。

/* Declare for Opera and Webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){
	#selector {
		property: value;
	}
}

/* Revert for Safari (and other Webkit browsers) and Firefox 3.5 */
body:first-of-type #selector {
	property:value;
}