Browserslist: building modern web apps for diverse global audience
Tags: showdev, javascript, webdev
Published: 2022-08-24 16:25:00

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3ree936dxgbl8qt4490.png)

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](https://en.wikipedia.org/wiki/Tencent_QQ) or [UC Browser](https://en.wikipedia.org/wiki/UC_Browser) that aren’t present anywhere else in the world:

![Browser usage in the US, Netherlands, and China](https://im2.ezgif.com/tmp/ezgif-2-58519c499f.webp)

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

![WebP image format supporting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofpbry9dt40kftwnod5c.png)

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](https://github.com/postcss/autoprefixer), [PostCSS](https://github.com/postcss/postcss) and [Stylelint](https://github.com/ismay/stylelint-no-unsupported-browser-features) for CSS transformation, [Babel](https://babeljs.io/) and [Webpack](https://webpack.js.org) for JavaScript transpilation and bundling, [ESLint](https://eslint.org) 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](https://github.com/browserslist/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](https://github.com/vercel/next.js) joined the club in the [v12.2 release](https://nextjs.org/blog/next-12-2#other-improvements).

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

```jsx
"browserslist": [
  ">0.1%"
]
```

This config matches all browser versions that are used by at least 0.1 % of the audience worldwide. [Autoprefixer](https://www.npmjs.com/package/autoprefixer), [Babel](https://babeljs.io/), and [other tools](https://github.com/browserslist/browserslist#browserslist-) 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:

```jsx
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:

![All browser versions that are used by at least 0.1 % of the audience worldwide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvbyfwvi8lb8obyp9d6g.png)

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](https://caniuse.com/es6-module):

```jsx
npx browserslist ">0.1% and last 2 versions and not dead and supports es6-module"
```

![The most recent versions of all browsers, exclude dead browsers, and leave only those ones that support ES6 modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zgqy0ks9pnymb66n8n8.png)

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](https://browsersl.ist/) website.

## Easy way to check compatible browsers

[browsersl.ist](https://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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsfqnurjkxbh4yan6ed5.png)

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](https://browsersl.ist/?q=%3E0%25+in+alt-an&region=alt-an):

![Browser versions used in Antarctica](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv36ldvtkrzljs0v1eog.png)

The coverage data is shared with the [Can I Use](https://caniuse.com) database, so you can check which browser versions support certain features such as [CSS Container Queries](https://caniuse.com/css-container-queries):

![Browsers that supports CSS Container Queries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80vclxwa7lah6letaijc.png)

Browserslist has a rich query syntax to fine-tune the query to your audience. So, [browsersl.ist](https://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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrv01kcbkz0u0099du9e.png)

## Next up: try Browserslist and [browsersl.ist](https://browsersl.ist/) today

[Browserslist](https://github.com/browserslist/browserslist) is a must-have tool for building modern web applications.

Here at [Cube](https://cube.dev/?utm_source=dev-to&utm_medium=post&utm_campaign=browserslist), where we build the API for modern data apps, we use it across all our websites, including [blog](https://cube.dev/blog/), [docs](https://cube.dev/docs), and data application [examples](https://highcharts-demo.cube.dev/#/). 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](https://browsersl.ist/) and see it in action!** Whether you’re new to Browserslist or not, [browsersl.ist](http://browsersl.ist/) is the best playground.

Don't hesitate to share a link to [browsersl.ist](http://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](https://twitter.com/Browserslist).