title: Graded browser support
lang: en

> We load a basic stylesheet to all users. This contains only [normalisation](https://necolas.github.io/normalize.css/) 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](https://www.sitepoint.com/cutting-the-mustard-with-css-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.
>
> <cite>*[Graded browser support](https://github.com/springernature/frontend-playbook/blob/master/practices/graded-browser-support.md)* ([cache](/david/cache/85aca7f1c273ca304c3e546a24334f33/))</cite>

Very clever technique for Progressive Enhancement that I discovered *via* this [fantastic talk transcript](https://sonniesedge.co.uk/talks/dear-developer) ([cache](/david/cache/c29715f16da9411c6550c25b7b99c418/)). Go read the whole piece, the Web deserves it.