Modern Browser Targeting

We all know that in general we should not put browser specific CSS in, just use CSS that works everywhere. Sometimes though it is unavoidable for little intricacies.

To target IE9 or less use conditional commenting to attach an external CSS file with appropriate overrides:

<!--[if lte IE 9]>
  <link href="/bundles/ie9.css" type="text/css" rel="stylesheet" />
<![endif]-->

To target IE10 and IE11:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS here */ }

To target Edge Browser:

@supports (-ms-accelerator:true) { /* MS Edge CSS here */ }

To target Firefox:

@-moz-document url-prefix() { /* Firefox CSS here */ }