HTML5 – CSS3 mag

■IE6

* html #selector {
	property:value;
}

■IE7

*:first-child+html #selector {
	property:value;
}

■IE8

#selector {
	property: value;
}
head~/* */body #selector {
	property: value;
}
html:not(:target) #selector {
	property: value;
}

IE7以前用を記述、IE8用に上書き、それ意外のモダンブラウザ用にさらに上書き

■Firefox2

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

■Firefox3

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

Fx2用を記述し、Fx3用を上書き

■Safari2-3

html[xmlns*=""] body:last-child #selector {
	property: value;
}

■Safari2-3.1

html[xmlns*=""]:root #selector {
	property: value;
}

■Safari3以上、Chrome1以上

@media screen and (-webkit-min-device-pixel-ratio:0) {
	#selector {
		property: value;
	}
}

Safari4に適用させ、Firefoxに適用させたくない場合など

■Safari3以上、Chrome1以上、Firefox3.5以上、Opera9以上

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

■iPhone

@media screen and (max-device-width: 480px) {
 #selector { property: value; }
}

または、

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

iPhone用のCSSファイルを読み込ませて対応

■iPad

@media screen and (max-device-width: 1024px) {
 #selector { property: value; }
}

または、

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" rel="stylesheet" />

iPad用のCSSファイルを読み込ませて対応

この記事を共有 :

Related posts:

• 「SitePoint」からHTML5の最小構成記述サンプルと解説
• HTML5 のリセット用スタイルシート
• Adobeも公認するFlash広告をHTML5に変換してiPhoneやiPadに配信する技術
• CSS3の疑似セレクタをIE5～8にも対応させることができる「ie-css3.js」
• CSS3 Transitions アニメーションの使い方