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
- at the same time, we’d like to use modern JavaScript and CSS features
Of course, we have great tooling for that: Autoprefixer, PostCSS and Stylelint for CSS transformation, Babel and Webpack for JavaScript transpilation and bundling, ESLint for code analysis, and many others.
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.
Browserslist guarantees that your web application would work in all target browsers; JavaScript and CSS code would be correctly transpiled. On top of that, you’ll get smaller bundle size and application load time.
How to get started with Browserslist
First, you need to add a Browserslist config right to the package.json:
"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.
Easy way to check compatible browsers
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:
The coverage data is shared with the Can I Use database, so you can check which browser versions support certain features such as CSS Container Queries:
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.
Here at Cube, where we build the API for modern data apps, we use it across all our websites, including blog, docs, and data application examples. With Browserslist, we’re sure that Cube’s global developer community gets the best experience possible. We’re also okay to serve ~10 % less JavaScript and CSS code because of smaller bundles.
Now, it's time to visit browsersl.ist and see it in action! Whether you’re new to Browserslist or not, browsersl.ist is the best playground.
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.
Top comments (1)
Awesome!