【CSS】IEのみに適用する、Firefoxのみに適用する、Chromeのみに…

問題

特定のブラウザのみにスタイルシートを適用したいです。

IE10、IE11では条件付きコメントが効かないので別な方法が必要なのですが。

答え

それぞれ以下のようにすると可能。

IEのみに適用

@media all and (-ms-high-contrast: none) {
  /* ここに書く */
  span {
    color:#c00;
  }
}

Firefoxのみに適用

@-moz-document url-prefix() {
  /* ここに書く */
  span {
    color:#0c0;
  }
}

Chromeのみに適用

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* ここに書く */
  span {
    color:#00c;
  }
}

Safariのみに適用

::-webkit-full-page-media, :future, :root セレクタ {
  color:#c0c;
}