最新のブラウザ別CSSハック記述方法

最新のブラウザ別CSSハック記述方法の画像

ブラウザがバージョンアップされていく度に条件が変わるので、CSSハックを使用する場合には、最新情報を常に取り入れていくことが肝心。(以下のCSSハックの情報は2015年5月時点)

極力CSSハックを使用しないでデザインできることが当たり前だけど望ましい。
どうしようもなくなった場合だけ使用する。

また、使用する際は各ブラウザで適用されているか私見で確認は十分にすること。

/* --- Internet Explorerハック */ 
.style {
  color: #333\9; /* IE8以下 */
  *color: #333; /* IE6とIE7 */
  _color: #333 /* IE6のみ */
}

/* IE6のみ */
* html .style {
  color: #333;
}

/* IE6以外 */
html > body .style {
  color: #333;
}

/* IE7のみ */
*:first-child+html .style {
  color: #333;
}

/* IE9 */
.style:not(:target) {
  color:#333\9;
}

/* IE10以降 */
@media all and (-ms-high-contrast:none){
  .style {
    color: #333;
  }
}

/* IE11のみ */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .style {
    color: #333;
  }
}

/* Firefoxのみ */
@-moz-document url-prefix() {
 .style {
    color: #333;
 }
}

/* Safariのみ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .style{
    color: #333;
  }
}

/* --- ChromeとOperaのみ */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .style {
    color: #333;
  }
}

/* --- IEの条件付きコメントを使う方法もある */

/* IE9のみ */
<!--[if IE 9.0]>******<![endif]-->

/* IE8のみ */
<!--[if IE 8.0]>******<![endif]-->

/* IE7のみ */
<!--[if IE 7.0]>******<![endif]-->

/* IE6のみ */
<!--[if IE 6.0]>******<![endif]-->

/* IE9以下 */
<!--[if lte IE 9.0]>******<![endif]-->

/* IE8以下 */
<!--[if lte IE 8.0]>******<![endif]-->

/* IE7以下 */
<!--[if lte IE 7.0]>******<![endif]-->

/* IE6以下 */
<!--[if lte IE 6.0]>******<![endif]-->