Graded browser support

We load a basic stylesheet to all users. This contains only normalisation and a few small enhancements to the user-agent stylesheet. To load the full experience only in modern browsers (grade-A and grade-X) we implement logic in the media attribute of the <link> element that identifies the main stylesheet, loading the stylesheet only in browsers that recognise the properties of that media query. This technique is documented here: Cutting the Mustard with Media queries.


We couple the loading of JavaScript to the loading of the enhanced CSS. If the browser loads the CSS within the media query, then load the JavaScript.

Graded browser support (cache)

Very clever technique for Progressive Enhancement that I discovered via this fantastic talk transcript (cache). Go read the whole piece, the Web deserves it.