Browser Grading is all well and good, but eventually you have to actually do something different in the browsers you want to get the full experience and the browsers you want to have a simplified experience. Today, we’ll blitz through a bunch of techniques that people have used in the past to do this.
Ultimately, all of these techniques are about Graceful Degradation. There’s a lot of discussion out there about Graceful Degradation and its politer cousin Progressive Enhancement. But to handle truly incompetent browsers, we basically want to turn off all the fancy stuff. Generally speaking, this means you want to load your JavaScript and CSS only if the browser is good enough to use it.
IE Conditional Comments
Good ol’ Internet Explorer has a weird feature called conditional comments that lets you write HTML that only shows in IE, or only shows in non-IE browsers. Of course, when they made IE slightly better, they turned it off so that they would get the good code, but IE 5-9 can be excluded this way.
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9
<!-- <![endif]-->
CSS Hacks
By taking advantage of known CSS parsing limitations, you can write CSS that will only be read by certain browsers. Be careful that you don’t end up writing two different stylesheets in one file though.
This famous CSS hack sends different widths to older IE browsers and other browsers, which was super important when IE improperly implemented the CSS Box model.
div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
Test everything
Instead of checking for browsers, what it we checked for features! Several JavaScript libraries made this convenient, with has.js and Modernizr being the hottest ones back in the day. Modernizr is even still being maintained!
Eventually, the browser rolled these ideas into real features, with the @supports rule, and CSS.supports.
result = CSS.supports("display: flex");
Cutting the mustard
But we don’t really want to test every single feature. We want to know if the browser is capable enough or not. This is really a boolean test. The BBC came up with a test they called Cutting The Mustard, to see if a browser is really modern. The original test passed on IE9+ and Android Webkit, which you probably don’t want to support today. An updated cut removes those two obsolete browsers.
With the rise of modern JavaScript, we can use module support as a mustard test. If the browser supports modules, it gets your JavaScript, and if it doesn’t, it doesn’t. You’ll need to be a little careful with your CSS though.
<script type="module" src="./mustard.js"></script>