Nowadays, web applications are usually built for diverse audience that spans worldwide across countries and continents. Upon checking web analytics, you would probably find that your audience is almost evenly divided between Americas, Asia, and Europe—and you surely can’t ignore Africa and Oceania:
Web browser usage differs substantially across regions. For instance, iOS devices are far less popular in Netherlands than in the US. In China, you will see popular local browsers like QQ Browser or UC Browser that aren’t present anywhere else in the world:
However, support for modern web technology also differs across browsers and browser versions:
So, we as web developers need to find the right balance between the user experience (UX) of the applications we’re building and our own developer experience (DX):
- we’d like our apps to work flawlessly in any browser that our audience uses
- we’d also like our apps to be smaller in size so they download faster
But how do we tell all these tools about the audience of our application, browsers, and supported features?
Browserslist to the rescue! Browserslist is a library that helps share the browser compatibility configuration with front-end tools. All popular tools, including the ones listed above, already work with Browserslist. More tools integrate as we speak: for instance, Next.js joined the club in the v12.2 release.
First, you need to add a Browserslist config right to the
"browserslist": [ ">0.1%" ]
This config matches all browser versions that are used by at least 0.1 % of the audience worldwide. Autoprefixer, Babel, and other tools will find target browsers automatically and bundle the code accordingly.
But what exactly are these target browsers and their versions? Browserslist provides a CLI interface to check that:
npx browserslist ">0.1%"
Voila! We get browsers ranging from QQ Browser and UC Browser to Internet Explorer and Opera Mini. They are still not going anywhere:
Actually, the queries may be much more complicated than that: let’s include the most recent versions of all browsers that have been just released, exclude dead browsers, and leave only those ones that support ES6 modules:
npx browserslist ">0.1% and last 2 versions and not dead and supports es6-module"
Browserslist’s CLI interface is good enough to quickly check a single query. However, when composing and experimenting with a query for your production application, this can be helpful:
- better data visualization for audience coverage
- query linter and query syntax docs
Goodbye, console. Meet browsersl.ist website.
browsersl.ist website is the companion tool for Browserslist. Check it out!
First, it can help with the audience coverage. It’s recommended to use the
defaults query as the starting point because this query provides reasonable configuration for most users. It covers global audience and matches recent versions of popular and well-maintained browsers worldwide:
You can view the coverage for particular continents and countries. Apparently, seals and penguins as well as other inhabitants of the research stations in Antarctica prefer to use Safari:
Browserslist has a rich query syntax to fine-tune the query to your audience. So, browsersl.ist website provides complete documentation on query features; you might be surprised to find there that you can also target Node.js versions:
Next up: try Browserslist and browsersl.ist today
Browserslist is a must-have tool for building modern web applications.
Don't hesitate to share a link to browsersl.ist with your friends or post queries with surprising or unexpected results on social media. We'd love to know what you think, so please leave your feedback in the comments and tag us on Twitter.