| kind | title |
|---|---|
📌 Docs/References |
Browser support |
This project targets modern browsers.
Our subjective definition is: current AND previous stable versions of 
Chrome, 
Firefox and 
Safari.
In the real world, browsers evolve at different speeds. Many browsers are based on Chromium now, and they often land Web features early. On the other side, Safari often lands Web features last. Because of this, we maintain a more explicit list of such modern browsers and we update it every 6 months, a few months after a new Safari release gets out.
| Browser | Version | Comments |
|---|---|---|
| Chrome |
>=86 |
Desktop & Android details |
| Firefox |
>=81 |
Desktop & Android details |
| Safari |
>=14 |
macOS, iOS + WebView based browsers details |
| browsers based on chromium... | ||
 Brave |
>=1.15 |
Based on Chromium 86 details |
 Edge |
>=86 |
Based on Chromium 86 details |
 Opera |
>=72 |
Based on Chromium 86 details |
 Samsung Internet |
>=14 |
Based on Chromium 87 details |
 Vivaldi |
>=3.4 |
Based on Chromium 86 details |
ℹ️ The above list is based on browser versions that were out when Safari 14 was released in september 2020.
As a contributor of this component library, you need to make sure a given Web feature (HTML, CSS, JS, SVG, browser API...) is supported by modern browsers before using it.
When it comes to CSS features, we're not using autoprefixer yet. This could change in the future. For now, this means you really need to wait for native support in modern browsers.
When it comes to JavaScript language features, we decided not to use any transpilation provided by tools like Babel. We made this decision out of simplicity. We don't intend to change this in the future. For now, this means you really need to wait for native support in modern browsers.
When it comes to JavaScript and browser APIs than can be polyfilled, we try to wait for native support in modern browsers. In some rare situations (hello Safari), we can make an exeption and rely on a polyfill with a dependency in this project. We did this in the past with:
If you're not sure if a given feature is supported by modern browsers, you can find out on those sites:
- Can I use? works really well for HTML, CSS, SVG and browser APIs
- Kangax's compat table works really well for specific JavaScript features
- MDN works well in for all features
Browser vendors also maintain platform/feature status pages:
- https://www.chromestatus.com/features
- https://developer.microsoft.com/en-us/microsoft-edge/status/
- https://platform-status.mozilla.org/
- https://webkit.org/status/
As a user of this component library, you can be sure it will work in modern browsers. If you need wider browser support, you will need to adapt your project configuration and toolchain.
When it comes to CSS features, we don't have a clear solution for you right now.
When it comes to JavaScript language features, you will need to configure your toolchain (bundler, transpiler...) to transform the source of our components to something that works for you context.
When it comes to JavaScript and browser APIs than can be polyfilled, you will need to choose and load the appropriate polyfills yourself before you load our components.
There are lots of exciting new Web features we'd like to use in this project, but we still need to wait.
- JS: Top level await
- Waiting for Safari 15
- JS: Intl.NumberFormat - currencySymbol: 'narrow'
- Waiting for Safari 14.1
- JS: Private class features
- Waiting for Safari 14.1
- CSS: gap with Flexbox
- Waiting for Safari 14.1
- CSS: Subgrids
- Waiting for Chrome and Safari
- CSS: Container queries
- Very early but supported in Chrome with a flag
- JS: Temporal
- JS: .at() method on all the built-in indexables
- JS: New Set methods
- JS: Decorators