Summary
Each project has a package.json file that gets used by Gulp, which lists the browsers we support for that project. We should consult the last few months of Google Analytics to compare browser lists, and once the project spec is agreed upon, the package.json file should be updated with the agreed browser support, but otherwise our default browser support should be:
Browser types - Evergreen and OS-tied
Evergreen browsers automatically update themselves, so we don’t need to worry about specific versions. iOS and MacOS have somewhat auotmatic updates, but generally the major browser versions are tied to major operating system versions, hence we pick a browser version based on visitor data and browser age. eg, iOS Safari v6 supports flexbox, but not flex-wrap, and is 2013-era.
Additionally it makes sense to use feature-based development with fallbacks, rather than specifically supporting a browser or browser version. The exception being IE11, where it has many Flexbox bugs, but enough small hacks to not significantly impact development. Eg, flex-basis: value is buggy with IE11, but a fallback of max-width: value makes it work.
Browser Support (for spec writing)
Browser version numbers are current up to April 2020.
Evergreen Browsers:
- Chrome (v66+)
- Firefox (v60+)
- Microsoft Edge* (v17+)
- Opera (v53+)
- Android Chrome (v67+)
- Samsung Browser (v7.2+)
* Version number used for Edge is based on the number of EdgeHTML rather than Edge itself. This is because EdgeHTML is the engine for Edge that is related to feature support change.
OS-tied Browsers:
- Safari (v9+)
- Mobile Safari (v9.2+)
- Internet Explorer (v11)
To maintain efficient, and best-practice code (supported by all modern browsers), it neccesitates that IE11 requires more time and effort to support, so a client should be made aware that designs and layout may make use of fallbacks, but content remains fully accessible and readable. We can code like it’s 2013, but that increases the time it takes to build responsive, interactive and accessible websites.
As proven with LDC, having legacy code specifically supporting a browser version (IE8), rather than feature-based queries, interferred with later development updates.
Our code should also aim to support browsers that have a greater than 0.5% market share in the UK, and all major browser engines that are still supported (non-dead), which should equate to the following browserslist profile.
"browserslist": [
"> 1.5% in GB",
"last 4 edge major versions",
"last 15 firefox major versions",
"last 15 chrome major versions",
"safari >= 9",
"android > 5",
"last 3 and_uc major versions",
"last 3 and_ff major versions",
"ios_saf >= 9",
"samsung >= 7",
"ie > 10",
"not dead"
]
See the list on browserl.ist:
Or output the browsers on your local machine (node required)
npx browserslist "> 1.5% in GB,last 4 edge major versions,last 10 firefox major versions,last 10 chrome major versions,safari >= 8,android > 5,last 3 and_uc major versions,last 3 and_ff major versions,ios_saf >= 8,samsung >= 7,ie > 10,not dead"
CanIUse.com
CanIUse can import Google Analytics data from a project to give a list of browsers used and to query features against. (Tip: use a separate ‘analytics’ browser profile as it’ll log you into the E78 Google Account)