Browserslist

7 min read Original article ↗

How to get started

Use defaults if you’re building a web application for the global audience.

Use node 18 if you’re building a Node.js application, e.g., for server-side rendering.

Autoprefixer, Babel and many other tools will find target browsers automatically if you add the following to package.json:

      "browserslist": [
        "defaults and fully supports es6-module",
        "maintained node versions"
      ]
    

Query syntax

Start with the default configuration

You can pick a sound set of versions with the defaults query which is a shortcut for > 0.5%, last 2 versions, Firefox ESR, not dead. It matches recent versions of popular and supported browsers worldwide and includes Firefox Extended Support Release which is updated roughly annually.

The defaults query was thoroughly designed by the Browserslist community. It helps promote best practices and avoid common pitfalls.

Select browser versions with certain usage

You can pick versions that have more than or less than a certain size of the audience worldwide, in a region, or in a country. You can also use the visitor data of your own website.

Examples

Beware

  • You may exclude the most recent versions of all browsers that have been just released. Please always add last … versions to include them back.
  • You can exclude your global audience. Please be careful when narrowing the audience to a region or a country.
  • You may include dead versions. Please consider adding not dead.

Advanced

Select browser by Baseline

By Baseline.

Examples

Beware

  • Use Baseline Newly available with caution since it targets very recent browser versions.

Advanced

Select recent browser versions

You can pick a few recent browser versions.

Examples

Beware

  • You might exclude older versions still used by a substantial audience. Please always add > … to include them back.
  • You may pick dead browsers like Internet Explorer. Always use last … versions with not dead.

Advanced

Select specific browser versions

You can pick browser versions or a version range of your choice.

Examples

Beware

  • Make sure that your audience uses specific versions (e.g., in a corporate setting) or that your application is not built to work with specific versions (e.g., it’s a bleeding-edge demo project). Please consider using last … versions or > … to include more versions.
  • Note, that Opera Mini has special version all. not op_mini all is not a special query.

Advanced

  • ie 6-8 an inclusive range of Internet Explorer versions.
  • Firefox ESR the latest Firefox Extended Support Release.

Select specific Node.js versions

You can pick Node.js versions or a version range of your choice. Useful if you know for sure the runtime configuration of your server-side code.

Examples

Advanced

Select browser versions that support a certain feature

You can pick browser versions that support features from the Can I Use database. See the  caniuse-lite repository for the full list of features.

Examples

Beware

  • supports … is an alias for partially supports …, however as its naming is ambigious, prefer using partially supports to make your intent of including partially supported browsers clear.
  • These queries rarely work well on their own. Please consider combining them with other queries.

Combine multiple queries into one

You can combine versions matched by multiple queries with or or ,; you can intersect them with and. You can also negate any query with not if it’s not the first one in your list.

Examples

Beware

  • A query with not can't be the left-hand one in the list.
  • A query with not is always joined to the left-hand one with and, even if or or , are used.

Advanced

Exclude unmaintained browser versions

You can combine your queries with not dead to exclude dead browsers, i.e., browsers without official support or updates for more than 24 months. Right now these include IE 11, IE Mobile 11, BlackBerry 10, BlackBerry 7, Samsung 4, Opera Mobile 12.1, and all versions of Baidu.

Examples

Browserslist helps you keep the right balance between browser compatibility and bundle size. With Browserslist, you will cover wider audience and have smaller bundle size.