Browser Compatibility / Requirements
We currently target the following browsers:
- Firefox 69+ (2019-09)
- Chrome 71+ (2018-12)
- Edge 79+ (2020-01)
- Safari 13.1+ (2020-03)
- Opera 64+ (2019-10)
- iOS Safari 13.4+/iOS 13+ (2020-03)
- Android 4.4+ (2013): Chrome 80 can be installed on Android 4.4
These version requirements are derived from requiring the following features:
- Custom Elements (V1)
- Shadow DOM (V1)
- Async functions
- AbortController & AbortSignal
- Resize Observer
We use extra tooling/pollyfills:
- event-target-shim for supporting EventTarget constructors on older Safari.
- @webcomponents/scoped-custom-element-registry for Scoped Custom Element Registries, for all browsers.
Rules for when Browsers can potentially be dropped
For example this query can be use as a rough guideline:
npx browserslist "> 0.5% in alt-EU, last 1 years, Firefox ESR, not dead"
Handling of old Browsers
In case our modules are used with a too old browser this can lead to the following issues:
- The application works but some (possibly key) features are broken
To avoid such scenarios and to give the user proper feedback, we provide a standalone feature-detection script which gets loaded alongside the application and replaces the whole page with an information overlay in case a required feature is missing:
Device Resolution Support
We currently try to target "iPhone SE 1st gen" as the lowest supported (CSS) resolution: 320 x 568
See https://www.ios-resolution.com, https://www.mydevice.io/#compare-devices and https://en.wikipedia.org/wiki/IPhone_SE_(1st_generation) for more information.