Thu, January 19, 2017

ブラウザ別CSSハック集(IE、Firefox、Safari、iPhone / iPad等)

■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ファイルを読み込ませて対応

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree