Browser support
Understanding which browsers are supported by the design system and how to manage vendor prefixes, your website design and fallback notices.
In general, the design system follows the conditions:
- support the default and current version
- support any browser that supports ES6-module
- support any browser that is not considered "dead"
- support any browser that has more than 0.5% audience in the last 2 years
- do not support a browser that has no support from the original creator
- do not support a browser that is vulnerable
- do not support a browser that is considered "dead"
- do not support a fork of a "dead" browser
The default configuration that must be added to a project that using the UAE design system must be the following:
"browserslist": [
"defaults and supports es6-module",
"iOS >= 12",
"Android >= 8",
"last 2 years",
"> 0.5%",
"not dead"
]
By using the following the configuration, you will attain ~ 95.3% coverage in the United Arab Emirates. Learn more about on browsersl.ist and what will be the global and regional coverage using these configurations.
The following is an extract from the TailwindCSS Browser Support section.
In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11.
While most of the features in Tailwind CSS will work in all modern browsers, Tailwind also includes APIs for several bleeding-edge features that aren't yet supported by all browsers, for example the ` :focus-visible ` pseudo-class and ` backdrop-filter ` utilities
Handling vendor prefixes
Many CSS properties require vendor prefixes to be understood by browsers.
Autoprefixer is an excellent tool, which is a PostCSS plugin that automatically adds any necessary vendor prefixes based on the browsers you tell it you need to support.
When creating your website, it is recommended to add this plugin to your build process.
Can I use?
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The support data on this site is free to use under the CC BY 4.0 license.
While creating your website, it is recommended to check the CSS feature using this website and determine if it passess the rules mentioned above.
Fallback notice
First off, do not simply show an outdated browser message to users when you detect a browser that is not supported. Use the concept of "Graceful Degradation" [read more].
So, graceful degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user experience in older browsers.
This lower level will not be as nice to use for your website visitors, but it does still provide them with the basic use that they came to your website for.
This concept may not be applicable for your services and where you need the user to provide data and execute a functionality that may need certain browser functions.
While there is graceful degradation in place, you must inform the user by way of a notice that certain functionalities may not be available.
Outdated browser - without graceful degradation
Should you detect a browser that is considered "dead" and you simply cannot display content from your website, it does not allow for basic navigation, and it is a security concern - then you must display an outdated browser notice.
Simply saying that the browser is outdated is not enough. You must do the following:
- Provide details about which browser and what version was detected that generated the notice.
- Why is this browser not supported
- What options does the user have - such as downloading another browser or upgrading the current browser.
