Skip to content
This repository has been archived by the owner on Aug 5, 2021. It is now read-only.

Browser Support Matrix

Jump to bottom
Owen Buckley edited this page Sep 3, 2018 · 6 revisions
⚠️ We could use your help!

If you'd like to help us define a good set of conventions around browser and device support, please feel free to checkout our issue on it and let us know your thoughts!

We appreciate any and all contributions! 🙏

Browser Compatibility

Since Project Evergreen is ES2015+ "compliant" and aims to support as much of the modern web development experience as possible (like Web Components), one of our main constraints is on support for the various parts of the "Web Components" specs.

From webcomponents.org, as of 8/11/2018, this is the current support matrix for Web Components. Support Matrix

For our purposes, we definitely don't want to lose support for Firefox and Edge, so it looks like we'll be needing some polfyills anyway which would be a step needed to support Internet Explorer users. 👌

Current Browser Support

At time of this writing, known support has been established for:

  • Chrome*
  • FireFox
  • Safari (MacOS)
  • Safari (iOS)*
  • Edge*
  • IE11 🎉 👇

*TODO

Browserslist

Although covered in depth in the Build Pipeline docs, it is worth mentioning Browserslist here, as it is the primary tool by which frontend code, both JavaScript (Babel) and CSS (PostCSS), gets the rules for its processing from in terms of what kind of code output gets shipped to the browser.

We have based our defaults around this discusssion.

Example: In your .browserslistrc

last 2 versions

See the results

$ npx browserslist
and_chr 67
and_uc 11.8
chrome 67
edge 17
firefox 61
ie 11
ios_saf 11.3-11.4
ios_saf 11.0-11.2
safari 11.1

Evergreen Browsers

For Evergreen browsers, this is the recommended configuration for your browserslistrc file.

> 1%
not op_mini all
not ie 11

IE11

For IE11 support, this is the recommended configuration for your browserslistrc file.

> 1%
not op_mini all

IE 11 will also require some poylfills, see the Build Pipeline docs for more information. For testing IE and Edge, check out these VMs available from Microsoft.

Defining A User Base

As the spirit of Project Evergreen would imply, the primary target demographic is that of users of evergreen browsers, which admittedly does provide an advantage not always available.

Some things to consider are:

  • The browser APIs you want to use (Web Component related APIs in our case)
  • JavaScript language features you want to use (the "standard" lib, e.g. fetch, class, import / export, Promise, new Array methods, etc)
  • The % of browsers that above mix captures
  • Current user demograhipcs / statistics
  • The priority of certain user features for needing to have a certain % support across all browsers and devices.
  • Understanding the performance implications and technical debt of supporting older browsers

📝 Technical information for targetting Evergreen browsers and IE11 can be found in our Build Pipeline documentation.

Clone this wiki locally