DEV Community 👩‍💻👨‍💻

Cover image for Browserslist: building modern web apps for diverse global audience
Nastya Kataeva for Cube

Posted on

Browserslist: building modern web apps for diverse global audience

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:

Image description

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:

Browser usage in the US, Netherlands, and China

However, support for modern web technology also differs across browsers and browser versions:

WebP image format supporting

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%"
]
Enter fullscreen mode Exit fullscreen mode

This config matches all browser versions that are used by at least 0.1 % of the audience worldwide. AutoprefixerBabel, 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%"
Enter fullscreen mode Exit fullscreen mode

Voila! We get browsers ranging from QQ Browser and UC Browser to Internet Explorer and Opera Mini. They are still not going anywhere:

All browser versions that are used by at least 0.1 % of the audience worldwide

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"
Enter fullscreen mode Exit fullscreen mode

The most recent versions of all browsers, exclude dead browsers, and leave only those ones that support ES6 modules

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:

Browsers 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:

Browser versions used in Antarctica

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:

Browsers that supports 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:

Node.js documentation on queries

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 blogdocs, 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 (2)

Collapse
 
leonid_frontend profile image
Leonid Yakovlev

Awesome!

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!