? Graded browser support (archive)

Source originale du contenu

Graded browser support

Our criteria for browser support

We follow the guidelines for graded browser support outlined by Nate Koechley at Yahoo: Yahoo Grade Browser Support guide

Our browser support in summary:

| Tables | Grade-A support | Grade-C support | | --------------------------- |:-------------------------------:| ------------------:| | Chrome | latest stable, latest stable -1 | < 29 | | Edge | latest stable, latest stable -1 | n/a | | Firefox | latest stable, latest stable -1 | < 29 | | IE | 11 | < 11 | | Opera | latest stable | < 16 | | Safari iOS | latest stable, latest stable -1 | < 7 | | Safari MacOS | latest stable, latest stable -1 | < 6.1 | | Android browser (Chromium) | Latest stable | < 4.4 |


How we implement graded browser support

Our primary approach to graded browser support is the "cutting the mustard" progressive enhancement technique, based upon the principles developed by the BBC: Cutting the Mustard. However, user agent sniffing is still applied on some legacy projects.

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.

The media queries we use are based upon CSS Only Mustard Cut, with a preference towards combining them into one rather than separating them out into multiple <link> elements. Note that you cannot add line breaks to the media query if they are combined.

Note: As mentioned above, while our graded browser support table specifies Internet Explorer 10 and below as Grade-C, until an updated media query is found this approach will render IE10 as Grade-A.

html <link rel="stylesheet" href="your-css.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0), (-ms-high-contrast: none), only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)">

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.

In order to check this, we use window.matchMedia.

javascript (function() { var linkEl = document.querySelector('link'); if (window.matchMedia && window.matchMedia(linkEl.media).matches) { var script = document.createElement('script'); script.src = 'your-script.js'; script.async = true; document.body.appendChild(script); } })();

The javascript code outlined above will fail in Internet Explorer if there is more than one link element. You can get around this by targeting the specific link element using a class or ID.