|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- title: Graded browser support
- url: https://github.com/springernature/frontend-playbook/blob/master/practices/graded-browser-support.md
- hash_url: 85aca7f1c273ca304c3e546a24334f33
-
- # Graded browser support
-
- * [Our criteria for browser support](#our-criteria-for-browser-support)
- * [How we implement graded browser support](#how-we-implement-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](https://github.com/yui/yui3/wiki/Graded-Browser-Support)
-
- Our browser support in summary:
-
- - Grade-A are browser versions that are explicitly *supported*. A product bug in one of these browsers is a high priority.
- - Grade-C are browser versions that are explicitly *_not_ supported*. We serve only the minimum styling and functionality to these browsers.
- - Grade-X are the grey area between Grade-A and Grade-C. We serve them the same code as Grade-A, but we do not test our products against these browser versions. Over time, analysis of errors and usage patterns may cause some browsers in Grade-X to be deliberately demoted to Grade-C.
-
- | 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 |
-
- ### Notes
-
- - We have no explicit Grade-C support for Edge.
- - We have no Grade-X support for IE, as we officially only support IE11, with anything below that being Grade-C. However, due to browser technical limitations we can only detect IE10+, so IE10 is, for now, included in our CTM media query.
-
- ## 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](http://responsivenews.co.uk/post/18948466399/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](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/).
-
- The media queries we use are based upon [CSS Only Mustard Cut](https://github.com/Fall-Back/CSS-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](https://developer.mozilla.org/en/docs/Web/API/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.
|
