Cutting the mustard with only CSS
JavaScript can be pretty brittle, so having a way to exclude browsers that don’t cut the mustard via CSS can be really useful, especially if you don’t want to serve them large amounts of CSS that they won’t properly understand. Since we can’t prevent loading a stylesheet via feature queries, the media attribute on a <link> element seems the next best thing. Andy Kirk has come up with a few combinations:
Code language: HTML
<!--
Print (Edge doesn't apply to print otherwise)
IE 10, 11
Edge
Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+
FF 29+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
only print,
only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active),
only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
only all and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0),
only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)
">
<!--
Print (Edge doesn't apply to print otherwise)
Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+, Android UCBrowser ~11.8+
FF 47+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
only print,
only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
">
