ブラウザ別のCSSハック

IE6以下
#help_me { _color: blue; }
* html #help_me  { color: red; }
IE7
*:first-child+html #help_me { color: red; } 
*+html #help_me {  color: red; }
IE6, IE7
#help_me { /color: blue; }
IE8
#help_me { color: blue9; }
IE7, IE8
#help_me { color/***/: blue9; }
IE6以外
#help_me { color/**/: blue; }
IE6, IE7以外
html>/**/body #help_me { color: red; }
IE6〜IE8以外
:root *> #help_me { color: red;  }
モダンブラウザ Firefox
#help_me,  x:-moz-any-link  { color: red; }
Firefox 3.0以上
#help_me,  x:-moz-any-link, x:default  { color: red; }
Safari 2-3
html[xmlns*=""] body:last-child #help_me { color: red; }
Safari 2 – 3.1
html[xmlns*=""]:root #help_me  { color: red; }
Safari 2 – 3.1, Opera 9.25
*|html[xmlns*=""] #help_me { color: red;  }
Safari 3以上, Chrome
@media screen and (-webkit-min-device-pixel-ratio:0) {
#help_me  { color: red;  }
}
Safari 3以上, Chrome, Opera 9以上, Firefox 3.5以上
body:nth-of-type(1) #help_me { color: red; }
body:first-of-type #help_me {  color: red; }
Opera 9.25以上
;;body #help_me {  color: red; }
html:66irst-child #help_me {  color: red; }
Opera 8, 9以外
body[class|="hypen-ated"] #help_me {  color: red; }
iPhoneのみCSSを変える場合はiPhone用CSSを作成して読み込ませます。
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#help_me { color: red;  }
}
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

3 × 5 =