CSSハックについて

CSSハックとは、特定のブラウザを対象にスタイルを適用させる場合に用いられる技法のことを言います。何らかの原因でブラウザ間の表示にズレが生じた場合などに統一させるためにCSSハックを利用したりします。当然、ハックは使わないに越したことはないのですが、特に古いバージョンのブラウザなどは使わざるを得ない状況も出てきますので、いくつかCSSハックの種類を紹介します。

モダンブラウザ用ハック

Chrome、Safari

@media screen and (-webkit-min-device-pixel ratio: 0 ) {
  #hoge { color: #ff0; }
}

Safari

@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, #hoge { color: #ff0; }
}

Firefox

#hoge, x:-moz-any-link { color: #ff0; }

@-moz-document url-prefix() {
  #hoge { color: #ff0; }
}

IE用ハック

IE11

@media all and (-ms-high-contrast: none) {
  ::-ms-backdrop , #hoge { color: #ff0; }
}

IE10以上

@media all and (-ms-high-contrast: none){
  #hoge { color: #ff0; }
}

IE9

:root #hoge { color: #ff0\9; }

「\9」はWindowsではフォントによりバックスラッシュではなく「￥9」のように円マークで表示されます。

なるべくCSSハックは使用しないように作っていくのがベストだと思いますので、あまり多様はせず、やむを得ない場合にだけ使用するように心がけましょう。