【CSSリファレンス】CSS Hack

こんにちは（・∀・）

CSSハックをまとめましたのでご紹介します。

IE(IE10)

@media all and (-ms-high-contrast:none) {
  .sample {
    color: #ccc;
  }
}

IE(IE11)

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .sample {
    color: #ccc;
  }
}

Edge

@supports (-ms-ime-align:auto) {
  .sample {
   color: #ccc;
  }
}

Firefox

@-moz-document url-prefix() {
  .sample {
    color: #ccc;
  }
}

Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .sample {
    color: #ccc;
  }
}

Safari

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

以上CSS Hackのご紹介でした。IEは10以上となります。またIEの条件付きコメントはIE9以下では使用できますがIE10以上ではコメントとして扱われるようになりました。次にいくつかHTMLの条件付きコメントも載せておきます。

IEの条件付きコメント

もうあまり使用することはないでしょうがIEの条件付きコメントもいくつかご紹介しておきます。

IE9

<!--[if IE 9]>ここに記述した内容がIE9に適用されます。<![endif]-->

IE9以下

<!--[if lte IE 9]>ここに記述した内容がIE9以下に適用されます。<![endif]-->

数字の部分がバージョンなので数値を変更すれば他のバージョンで使用できます。他にも未満や以上などもありますが必要なさそうなのでここではご紹介しません。