Firefoxのみ、IEのみなど特定のブラウザにだけCSSを反映させるCSSハック。

CSSハックです。
なるべくならこういう行為はしないような実装をしなければならないのですが、今回どうしても上手くいかないので仕方なく。
メモがわりに置いておきます。

ややこしい指定は一切なしで単純にベンダープレフィックスを使用します。

Chorome

@media screen and (-webkit-min-device-pixel-ratio:0) {
	hoge/*指定のclassやid*/ {
		margin-top: 0;
	}
}

Firefox

@-moz-document url-prefix() {
	hoge/*指定のclassやid*/ {
		margin-top: 0;
	}
}
||>


** Safari

>|CSS|
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, hoge/*指定のclassやid*/ {
    background-color: LightSteelBlue;
  }
}

IE ※10と11のみ

/* IE10以降 */
@media all and (-ms-high-contrast:none){
  hoge/*指定のclassやid*/ {
    background-color: LightSkyBlue;
  }
}
 
/* IE11だけに適用 */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop,hoge/*指定のclassやid*/ {
    background-color: LightSkyBlue;
  }
}

まとめ

CSSハックを考える人は頭がいいですね。
ただ、これらは動作が保証されている訳ではなく、ソースコードも乱雑になってしまうばかりか、SEOなどにもやはり影響がでちゃうのでどのブラウザでも正常に動くように設計する意識は凄く大事です。
実際これらのデバッグでどれだけ時間がとられるか。。バカになりません。。

もっとスキルを磨いていきたいものです。