* There is a `defaults` query, which gives a reasonable configuration
for most users:
```json
"browserslist": [
"defaults"
]
```
* If you want to change the default set of browsers, we recommend combining
`last 2 versions`, `not dead` with a usage number like `> 0.2%`. This is
because `last n versions` on its own does not add popular old versions, while
only using a percentage above `0.2%` will in the long run make popular
browsers even more popular. We might run into a monopoly and stagnation
situation, as we had with Internet Explorer 6. Please use this setting
with caution.
* Select browsers directly (`last 2 Chrome versions`) only if you are making
a web app for a kiosk with one browser. There are a lot of browsers
on the market. If you are making general web app you should respect
browsers diversity.
* Don’t remove browsers just because you don’t know them. Opera Mini has
100 million users in Africa and it is more popular in the global market
than Microsoft Edge. Chinese QQ Browsers has more market share than Firefox
and desktop Safari combined.
## Browsers Data Updating
`npx browserslist@latest --update-db` updates `caniuse-lite` version
in your npm, yarn or pnpm lock file.
You need to do it regularly for two reasons:
1. To use the latest browser’s versions and statistics in queries like
`last 2 versions` or `>1%`. For example, if you created your project
2 years ago and did not update your dependencies, `last 1 version`
will return 2 year old browsers.
2. `caniuse-lite` deduplication: to synchronize version in different tools.
> What is deduplication?
Due to how npm architecture is setup, you may have a situation
where you have multiple versions of a single dependency required.
Imagine you begin a project, and you add `autoprefixer` as a dependency.
npm looks for the latest `caniuse-lite` version (1.0.30000700) and adds it to
`package-lock.json` under `autoprefixer` dependencies.
A year later, you decide to add Babel. At this moment, we have a
new version of `canuse-lite` (1.0.30000900). npm took the latest version
and added it to your lock file under `@babel/preset-env` dependencies.
Now your lock file looks like this:
```ocaml
autoprefixer 7.1.4
browserslist 3.1.1
caniuse-lite 1.0.30000700
@babel/preset-env 7.10.0
browserslist 4.13.0
caniuse-lite 1.0.30000900
```
As you can see, we now have two versions of `caniuse-lite` installed.
## Queries
Browserslist will use browsers and Node.js versions query
from one of these sources:
1. `browserslist` key in `package.json` file in current or parent directories.
**We recommend this way.**
2. `.browserslistrc` config file in current or parent directories.
3. `browserslist` config file in current or parent directories.
4. `BROWSERSLIST` environment variable.
5. If the above methods did not produce a valid result
Browserslist will use defaults:
`> 0.5%, last 2 versions, Firefox ESR, not dead`.
### Query Composition
An `or` combiner can use the keyword `or` as well as `,`.
`last 1 version or > 1%` is equal to `last 1 version, > 1%`.
`and` query combinations are also supported to perform an
intersection of all the previous queries:
`last 1 version or chrome > 75 and > 1%` will select
(`browser last version` or `Chrome since 76`) and `more than 1% marketshare`.
There is 3 different ways to combine queries as depicted below. First you start
with a single query and then we combine the queries to get our final list.
Obviously you can *not* start with a `not` combiner, since there is no left-hand
side query to combine it with. The left-hand is always resolved as `and`
combiner even if `or` is used (this is an API implementation specificity).
| Query combiner type | Illustration | Example |
| ------------------- | :----------: | ------- |
|`or`/`,` combiner <br> (union) | ![Union of queries](img/union.svg) | `> .5% or last 2 versions` <br> `> .5%, last 2 versions` |
| `and` combiner <br> (intersection) | ![intersection of queries](img/intersection.svg) | `> .5% and last 2 versions` |
| `not` combiner <br> (relative complement) | ![Relative complement of queries](img/complement.svg) | All those three are equivalent to the first one <br> `> .5% and not last 2 versions` <br> `> .5% or not last 2 versions` <br> `> .5%, not last 2 versions` |
_A quick way to test your query is to do `npx browserslist '> 0.5%, not IE 11'`
in your terminal._
### Full List
You can specify the browser and Node.js versions by queries (case insensitive):
* `defaults`: Browserslist’s default browsers
(`> 0.5%, last 2 versions, Firefox ESR, not dead`).
* `> 5%`: browsers versions selected by global usage statistics.
`>=`, `<` and `<=` work too.
* `> 5% in US`: uses USA usage statistics.
It accepts [two-letter country code].
* `> 5% in alt-AS`: uses Asia region usage statistics.
List of all region codes can be found at [`caniuse-lite/data/regions`].
* `> 5% in my stats`: uses [custom usage data].
* `> 5% in browserslist-config-mycompany stats`: uses [custom usage data]
from `browserslist-config-mycompany/browserslist-stats.json`.
* `cover 99.5%`: most popular browsers that provide coverage.
* `cover 99.5% in US`: same as above, with [two-letter country code].
* `cover 99.5% in my stats`: uses [custom usage data].
* `dead`: browsers without official support or updates for 24 months.
Right now it is `IE 10`, `IE_Mob 11`, `BlackBerry 10`, `BlackBerry 7`,
`Samsung 4` and `OperaMobile 12.1`.
* `last 2 versions`: the last 2 versions for *each* browser.
* `last 2 Chrome versions`: the last 2 versions of Chrome browser.
* `last 2 major versions` or `last 2 iOS major versions`:
all minor/patch releases of last 2 major versions.
* `node 10` and `node 10.4`: selects latest Node.js `10.x.x`
or `10.4.x` release.
* `current node`: Node.js version used by Browserslist right now.
* `maintained node versions`: all Node.js versions, which are [still maintained]
by Node.js Foundation.
* `iOS 7`: the iOS browser version 7 directly.
* `Firefox > 20`: versions of Firefox newer than 20.
`>=`, `<` and `<=` work too. It also works with Node.js.
* `ie 6-8`: selects an inclusive range of versions.
* `Firefox ESR`: the latest [Firefox ESR] version.
* `PhantomJS 2.1` and `PhantomJS 1.9`: selects Safari versions similar
to PhantomJS runtime.
* `extends browserslist-config-mycompany`: take queries from
`browserslist-config-mycompany` npm package.
* `supports es6-module`: browsers with support for specific features.
`es6-module` here is the `feat` parameter at the URL of the [Can I Use]
page. A list of all available features can be found at
[`caniuse-lite/data/features`].
* `browserslist config`: the browsers defined in Browserslist config. Useful
in the tools to modify user’s config like
`browserslist config and supports es6-module`.
* `since 2015` or `last 2 years`: all versions released since year 2015
(also `since 2015-03` and `since 2015-03-10`).
* `unreleased versions` or `unreleased Chrome versions`:
The maintainers of `browserslist` and thousands of other packages are working
with Tidelift to deliver commercial support and maintenance for the open source
dependencies you use to build your applications. Save time, reduce risk,
and improve code health, while paying the maintainers of the exact dependencies
you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-browserslist?utm_source=npm-browserslist&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)