1 | # Browserslist [![Cult Of Martians][cult-img]][cult]
|
2 |
|
3 | <img width="120" height="120" alt="Browserslist logo by Anton Lovchikov"
|
4 | src="http://browserslist.github.io/browserslist/logo.svg" align="right">
|
5 |
|
6 | The config to share target browsers and Node.js versions between different
|
7 | front-end tools. It is used in:
|
8 |
|
9 | * [Autoprefixer]
|
10 | * [Babel]
|
11 | (external config in `package.json` or `browserslist` will be supported in 7.0)
|
12 | * [postcss-preset-env]
|
13 | * [eslint-plugin-compat]
|
14 | * [stylelint-no-unsupported-browser-features]
|
15 | * [postcss-normalize]
|
16 |
|
17 | [Browserslist Example] shows how every tool uses Browserslist.
|
18 | All tools will find target browsers automatically,
|
19 | when you add the following to `package.json`:
|
20 |
|
21 | ```json
|
22 | {
|
23 | "browserslist": [
|
24 | "last 1 version",
|
25 | "> 1%",
|
26 | "maintained node versions",
|
27 | "not dead"
|
28 | ]
|
29 | }
|
30 | ```
|
31 |
|
32 | Or in `.browserslistrc` config:
|
33 |
|
34 | ```yaml
|
35 | # Browsers that we support
|
36 |
|
37 | last 1 version
|
38 | > 1%
|
39 | maintained node versions
|
40 | not dead
|
41 | ```
|
42 |
|
43 | Developers set versions list in queries like `last 2 version`
|
44 | to be free from updating versions manually.
|
45 | Browserslist will use [Can I Use] data for this queries.
|
46 |
|
47 | Browserslist will take queries from tool option,
|
48 | `browserslist` config, `.browserslistrc` config,
|
49 | `browserslist` section in `package.json` or environment variables.
|
50 |
|
51 | You can test Browserslist queries in [online demo].
|
52 |
|
53 | [cult-img]: http://cultofmartians.com/assets/badges/badge.svg
|
54 | [cult]: http://cultofmartians.com/done.html
|
55 |
|
56 | <a href="https://evilmartians.com/?utm_source=browserslist">
|
57 | <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
|
58 | alt="Sponsored by Evil Martians" width="236" height="54">
|
59 | </a>
|
60 |
|
61 | [stylelint-no-unsupported-browser-features]: https://github.com/ismay/stylelint-no-unsupported-browser-features
|
62 | [eslint-plugin-compat]: https://github.com/amilajack/eslint-plugin-compat
|
63 | [Browserslist Example]: https://github.com/browserslist/browserslist-example
|
64 | [postcss-preset-env]: https://github.com/jonathantneal/postcss-preset-env
|
65 | [postcss-normalize]: https://github.com/jonathantneal/postcss-normalize
|
66 | [Autoprefixer]: https://github.com/postcss/autoprefixer
|
67 | [online demo]: http://browserl.ist/
|
68 | [Can I Use]: http://caniuse.com/
|
69 | [Babel]: https://github.com/babel/babel/tree/master/packages/babel-preset-env
|
70 |
|
71 | ## Tools
|
72 |
|
73 | * [`browserslist-ga`] downloads your website browsers statistics
|
74 | to use it in `> 0.5% in my stats` query.
|
75 | * [`browserslist-useragent`] checks browser by user agent string
|
76 | to match Browserslist target browsers query.
|
77 | * [`browserslist-useragent-ruby`] is a Ruby library to checks browser
|
78 | by user agent string to match Browserslist.
|
79 | * [`caniuse-api`] returns browsers which support some specific feature.
|
80 | * Run `npx browserslist` in your project directory to see project’s
|
81 | target browsers. This CLI tool is built-in and available in any project
|
82 | with Autoprefixer.
|
83 |
|
84 | [`browserslist-useragent-ruby`]: https://github.com/browserslist/browserslist-useragent-ruby
|
85 | [`browserslist-useragent`]: https://github.com/pastelsky/browserslist-useragent
|
86 | [`browserslist-ga`]: https://github.com/browserslist/browserslist-ga
|
87 | [`caniuse-api`]: https://github.com/Nyalab/caniuse-api
|
88 |
|
89 |
|
90 | ## Queries
|
91 |
|
92 | Browserslist will use browsers and Node.js versions query
|
93 | from one of this sources:
|
94 |
|
95 | 1. Tool options. For example `browsers` option in Autoprefixer.
|
96 | 2. `BROWSERSLIST` environment variable.
|
97 | 3. `browserslist` config file in current or parent directories.
|
98 | 3. `.browserslistrc` config file in current or parent directories.
|
99 | 4. `browserslist` key in `package.json` file in current or parent directories.
|
100 | **We recommend this way.**
|
101 | 5. If the above methods did not produce a valid result
|
102 | Browserslist will use defaults:
|
103 | `> 0.5%, last 2 versions, Firefox ESR, not dead`.
|
104 |
|
105 |
|
106 | ### Best Practices
|
107 |
|
108 | * Select browsers directly (`last 2 Chrome versions`) only if you are making
|
109 | web app for kiosk with one browser. There are a lot browsers on the market.
|
110 | If you are making general web app you should respect browsers diversity.
|
111 | * If you want to change the default set of browsers we recommend to combine
|
112 | `last 1 version`, `not dead` with `> 0.2%` (or `> 1% in US`,
|
113 | `> 1% in my stats`). Just `last n versions` adds too many dead browsers
|
114 | and does not add popular old versions. Just `> 0.2%` make popular browsers
|
115 | even more popular, so we will have a monopoly and stagnation, as we had
|
116 | with Internet Explorer 6.
|
117 | * Don’t remove browsers just because you don’t know them. Opera Mini has
|
118 | 100 million users in Africa and it is more popular in global market,
|
119 | than Microsoft Edge. Chinese QQ Browsers has more market share than Firefox
|
120 | and desktop Safari altogether.
|
121 |
|
122 |
|
123 | ### Full List
|
124 |
|
125 | You can specify the browser and Node.js versions by queries (case insensitive):
|
126 |
|
127 | * `> 5%`: browsers versions selected by global usage statistics.
|
128 | `>=`, `<` and `<=` work too.
|
129 | * `> 5% in US`: uses USA usage statistics. It accepts [two-letter country code].
|
130 | * `> 5% in alt-AS`: uses Asia region usage statistics. List of all region codes
|
131 | can be found at [`caniuse-lite/data/regions`].
|
132 | * `> 5% in my stats`: uses [custom usage data].
|
133 | * `cover 99.5%`: most popular browsers that provide coverage.
|
134 | * `cover 99.5% in US`: same as above, with [two-letter country code].
|
135 | * `cover 99.5% in my stats`: uses [custom usage data].
|
136 | * `maintained node versions`: all Node.js versions, which are [still maintained]
|
137 | by Node.js Foundation.
|
138 | * `node 10` and `node 10.4`: selects latest Node.js `10.x.x`
|
139 | or `10.4.x` release.
|
140 | * `extends browserslist-config-mycompany`: take queries from
|
141 | `browserslist-config-mycompany` npm package.
|
142 | * `ie 6-8`: selects an inclusive range of versions.
|
143 | * `Firefox > 20`: versions of Firefox newer than 20.
|
144 | `>=`, `<` and `<=` work too.
|
145 | * `iOS 7`: the iOS browser version 7 directly.
|
146 | * `Firefox ESR`: the latest [Firefox ESR] version.
|
147 | * `unreleased versions` or `unreleased Chrome versions`:
|
148 | alpha and beta versions.
|
149 | * `last 2 major versions` or `last 2 iOS major versions`:
|
150 | all minor/patch releases of last 2 major versions.
|
151 | * `since 2015` or `last 2 years`: all versions released since year 2015
|
152 | (also `since 2015-03` and `since 2015-03-10`).
|
153 | * `dead`: browsers from `last 2 version` query, but with less than 0.5%
|
154 | in global usage statistics and without official support or updates
|
155 | for 24 months. Right now it is `IE 10`, `IE_Mob 10`, `BlackBerry 10`,
|
156 | `BlackBerry 7`, and `OperaMobile 12.1`.
|
157 | * `last 2 versions`: the last 2 versions for *each* browser.
|
158 | * `last 2 Chrome versions`: the last 2 versions of Chrome browser.
|
159 | * `defaults`: Browserslist’s default browsers
|
160 | (`> 0.5%, last 2 versions, Firefox ESR, not dead`).
|
161 | * `not ie <= 8`: exclude browsers selected by previous queries.
|
162 |
|
163 | You can add `not ` to any query.
|
164 |
|
165 |
|
166 | ### Debug
|
167 |
|
168 | Run `npx browserslist` in project directory to see what browsers was selected
|
169 | by your queries.
|
170 |
|
171 | ```sh
|
172 | $ npx browserslist
|
173 | and_chr 61
|
174 | and_ff 56
|
175 | and_qq 1.2
|
176 | and_uc 11.4
|
177 | android 56
|
178 | baidu 7.12
|
179 | bb 10
|
180 | chrome 62
|
181 | edge 16
|
182 | firefox 56
|
183 | ios_saf 11
|
184 | opera 48
|
185 | safari 11
|
186 | samsung 5
|
187 | ```
|
188 |
|
189 |
|
190 | ### Notes
|
191 |
|
192 | Browserslist works with separated versions of browsers.
|
193 | You should avoid queries like `Firefox > 0`.
|
194 |
|
195 | Multiple criteria are combined as a boolean `OR`. A browser version must match
|
196 | at least one of the criteria to be selected.
|
197 |
|
198 | All queries are based on the [Can I Use] support table,
|
199 | e.g. `last 3 iOS versions` might select `8.4, 9.2, 9.3` (mixed major and minor),
|
200 | whereas `last 3 Chrome versions` might select `50, 49, 48` (major only).
|
201 |
|
202 | [`caniuse-lite/data/regions`]: https://github.com/ben-eb/caniuse-lite/tree/master/data/regions
|
203 | [two-letter country code]: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
|
204 | [custom usage data]: #custom-usage-data
|
205 | [still maintained]: https://github.com/nodejs/Release
|
206 | [Can I Use]: http://caniuse.com/
|
207 |
|
208 |
|
209 | ### Browsers
|
210 |
|
211 | Names are case insensitive:
|
212 |
|
213 | * `Android` for Android WebView.
|
214 | * `Baidu` for Baidu Browser.
|
215 | * `BlackBerry` or `bb` for Blackberry browser.
|
216 | * `Chrome` for Google Chrome.
|
217 | * `ChromeAndroid` or `and_chr` for Chrome for Android
|
218 | * `Edge` for Microsoft Edge.
|
219 | * `Electron` for Electron framework. It will be converted to Chrome version.
|
220 | * `Explorer` or `ie` for Internet Explorer.
|
221 | * `ExplorerMobile` or `ie_mob` for Internet Explorer Mobile.
|
222 | * `Firefox` or `ff` for Mozilla Firefox.
|
223 | * `FirefoxAndroid` or `and_ff` for Firefox for Android.
|
224 | * `iOS` or `ios_saf` for iOS Safari.
|
225 | * `Node` for Node.js.
|
226 | * `Opera` for Opera.
|
227 | * `OperaMini` or `op_mini` for Opera Mini.
|
228 | * `OperaMobile` or `op_mob` for Opera Mobile.
|
229 | * `QQAndroid` or `and_qq` for QQ Browser for Android.
|
230 | * `Safari` for desktop Safari.
|
231 | * `Samsung` for Samsung Internet.
|
232 | * `UCAndroid` or `and_uc` for UC Browser for Android.
|
233 |
|
234 |
|
235 | ## `package.json`
|
236 |
|
237 | If you want to reduce config files in project root, you can specify
|
238 | browsers in `package.json` with `browserslist` key:
|
239 |
|
240 | ```json
|
241 | {
|
242 | "private": true,
|
243 | "dependencies": {
|
244 | "autoprefixer": "^6.5.4"
|
245 | },
|
246 | "browserslist": [
|
247 | "last 1 version",
|
248 | "> 1%",
|
249 | "IE 10"
|
250 | ]
|
251 | }
|
252 | ```
|
253 |
|
254 |
|
255 | ## Config File
|
256 |
|
257 | Browserslist config should be named `.browserslistrc` or `browserslist`
|
258 | and have browsers queries split by a new line. Comments starts with `#` symbol:
|
259 |
|
260 | ```yaml
|
261 | # Browsers that we support
|
262 |
|
263 | last 1 version
|
264 | > 1%
|
265 | IE 10 # sorry
|
266 | ```
|
267 |
|
268 | Browserslist will check config in every directory in `path`.
|
269 | So, if tool process `app/styles/main.css`, you can put config to root,
|
270 | `app/` or `app/styles`.
|
271 |
|
272 | You can specify direct path in `BROWSERSLIST_CONFIG` environment variables.
|
273 |
|
274 |
|
275 | ## Shareable Configs
|
276 |
|
277 | You can use the following query to reference an exported Browserslist config
|
278 | from another package:
|
279 |
|
280 | ```json
|
281 | "browserslist": [
|
282 | "extends browserslist-config-mycompany"
|
283 | ]
|
284 | ```
|
285 |
|
286 | For security reasons, external configuration only supports packages that have
|
287 | the `browserslist-config-` prefix. npm scoped packages are also supported, by
|
288 | naming or prefixing the module with `@scope/browserslist-config`, such as
|
289 | `@scope/browserslist-config` or `@scope/browserslist-config-mycompany`.
|
290 |
|
291 | If you don’t accept Browserslist queries from users, you can disable the
|
292 | validation by using the `dangerousExtend` option:
|
293 |
|
294 | ```js
|
295 | browserslist(queries, { path, dangerousExtend: true })
|
296 | ```
|
297 |
|
298 | Because this uses `npm`'s resolution, you can also reference specific files
|
299 | in a package:
|
300 |
|
301 | ```json
|
302 | "browserslist": [
|
303 | "extends browserslist-config-mycompany/desktop",
|
304 | "extends browserslist-config-mycompany/mobile"
|
305 | ]
|
306 | ```
|
307 |
|
308 | When writing a shared Browserslist package, just export an array.
|
309 | `browserslist-config-mycompany/index.js`:
|
310 |
|
311 | ```js
|
312 | module.exports = [
|
313 | 'last 1 version',
|
314 | '> 1%',
|
315 | 'ie 10'
|
316 | ]
|
317 | ```
|
318 |
|
319 |
|
320 | ## Environment Variables
|
321 |
|
322 | If some tool use Browserslist inside, you can change browsers settings
|
323 | by [environment variables]:
|
324 |
|
325 | * `BROWSERSLIST` with browsers queries.
|
326 |
|
327 | ```sh
|
328 | BROWSERSLIST="> 5%" gulp css
|
329 | ```
|
330 |
|
331 | * `BROWSERSLIST_CONFIG` with path to config file.
|
332 |
|
333 | ```sh
|
334 | BROWSERSLIST_CONFIG=./config/browserslist gulp css
|
335 | ```
|
336 |
|
337 | * `BROWSERSLIST_ENV` with environments string.
|
338 |
|
339 | ```sh
|
340 | BROWSERSLIST_ENV="development" gulp css
|
341 | ```
|
342 |
|
343 | * `BROWSERSLIST_STATS` with path to the custom usage data
|
344 | for `> 1% in my stats` query.
|
345 |
|
346 | ```sh
|
347 | BROWSERSLIST_STATS=./config/usage_data.json gulp css
|
348 | ```
|
349 |
|
350 | * `BROWSERSLIST_DISABLE_CACHE` if you want to disable config reading cache.
|
351 |
|
352 | ```sh
|
353 | BROWSERSLIST_DISABLE_CACHE=1 gulp css
|
354 | ```
|
355 |
|
356 | [environment variables]: https://en.wikipedia.org/wiki/Environment_variable
|
357 |
|
358 |
|
359 | ## Environments
|
360 |
|
361 | You can also specify different browser queries for various environments.
|
362 | Browserslist will choose query according to `BROWSERSLIST_ENV` or `NODE_ENV`
|
363 | variables. If none of them is declared, Browserslist will firstly look
|
364 | for `production` queries and then use defaults.
|
365 |
|
366 | In `package.json`:
|
367 |
|
368 | ```js
|
369 | "browserslist": {
|
370 | "production": [
|
371 | "> 1%",
|
372 | "ie 10"
|
373 | ],
|
374 | "development": [
|
375 | "last 1 chrome version",
|
376 | "last 1 firefox version"
|
377 | ]
|
378 | }
|
379 | ```
|
380 |
|
381 | In `.browserslistrc` config:
|
382 |
|
383 | ```ini
|
384 | [production staging]
|
385 | > 1%
|
386 | ie 10
|
387 |
|
388 | [development]
|
389 | last 1 chrome version
|
390 | last 1 firefox version
|
391 | ```
|
392 |
|
393 |
|
394 | ## Custom Usage Data
|
395 |
|
396 | If you have a website, you can query against the usage statistics of your site.
|
397 | [`browserslist-ga`] will ask access to Google Analytics and then generate
|
398 | `browserslist-stats.json`:
|
399 |
|
400 | ```
|
401 | npx browserslist-ga
|
402 | ```
|
403 |
|
404 | Of course, you can generate usage statistics file by any other method.
|
405 | File format should be like:
|
406 |
|
407 | ```js
|
408 | {
|
409 | "ie": {
|
410 | "6": 0.01,
|
411 | "7": 0.4,
|
412 | "8": 1.5
|
413 | },
|
414 | "chrome": {
|
415 | …
|
416 | },
|
417 | …
|
418 | }
|
419 | ```
|
420 |
|
421 | Note that you can query against your custom usage data
|
422 | while also querying against global or regional data.
|
423 | For example, the query `> 1% in my stats, > 5% in US, 10%` is permitted.
|
424 |
|
425 | [`browserslist-ga`]: https://github.com/browserslist/browserslist-ga
|
426 | [Can I Use]: http://caniuse.com/
|
427 |
|
428 |
|
429 | ## JS API
|
430 |
|
431 | ```js
|
432 | var browserslist = require('browserslist');
|
433 |
|
434 | // Your CSS/JS build tool code
|
435 | var process = function (source, opts) {
|
436 | var browsers = browserslist(opts.browsers, {
|
437 | stats: opts.stats,
|
438 | path: opts.file,
|
439 | env: opts.env
|
440 | });
|
441 | // Your code to add features for selected browsers
|
442 | }
|
443 | ```
|
444 |
|
445 | Queries can be a string `"> 1%, IE 10"`
|
446 | or an array `['> 1%', 'IE 10']`.
|
447 |
|
448 | If a query is missing, Browserslist will look for a config file.
|
449 | You can provide a `path` option (that can be a file) to find the config file
|
450 | relatively to it.
|
451 |
|
452 | Options:
|
453 |
|
454 | * `path`: file or a directory path to look for config file. Default is `.`.
|
455 | * `env`: what environment section use from config. Default is `production`.
|
456 | * `stats`: custom usage statistics data.
|
457 | * `config`: path to config if you want to set it manually.
|
458 | * `ignoreUnknownVersions`: do not throw on direct query (like `ie 12`).
|
459 | Default is `false.`
|
460 | * `dangerousExtend`: Disable security checks for `extend` query.
|
461 | Default is `false.`
|
462 |
|
463 | For non-JS environment and debug purpose you can use CLI tool:
|
464 |
|
465 | ```sh
|
466 | browserslist "> 1%, IE 10"
|
467 | ```
|
468 |
|
469 |
|
470 | ## Coverage
|
471 |
|
472 | You can get total users coverage for selected browsers by JS API:
|
473 |
|
474 | ```js
|
475 | browserslist.coverage(browserslist('> 1%'))
|
476 | //=> 81.4
|
477 | ```
|
478 |
|
479 | ```js
|
480 | browserslist.coverage(browserslist('> 1% in US'), 'US')
|
481 | //=> 83.1
|
482 | ```
|
483 |
|
484 | ```js
|
485 | browserslist.coverage(browserslist('> 1% in my stats'), 'my stats')
|
486 | //=> 83.1
|
487 | ```
|
488 |
|
489 | ```js
|
490 | browserslist.coverage(browserslist('> 1% in my stats', { stats }), stats)
|
491 | //=> 82.2
|
492 | ```
|
493 |
|
494 | Or by CLI:
|
495 |
|
496 | ```sh
|
497 | $ browserslist --coverage "> 1%"
|
498 | These browsers account for 81.4% of all users globally
|
499 | ```
|
500 |
|
501 | ```sh
|
502 | $ browserslist --coverage=US "> 1% in US"
|
503 | These browsers account for 83.1% of all users in the US
|
504 | ```
|
505 |
|
506 | ```sh
|
507 | $ browserslist --coverage "> 1% in my stats"
|
508 | These browsers account for 83.1% of all users in custom statistics
|
509 | ```
|
510 |
|
511 | ```sh
|
512 | $ browserslist --coverage "> 1% in my stats" --stats=./stats.json
|
513 | These browsers account for 83.1% of all users in custom statistics
|
514 | ```
|
515 |
|
516 |
|
517 | ## Cache
|
518 |
|
519 | Browserslist caches the configuration it reads from `package.json` and
|
520 | `browserslist` files, as well as knowledge about the existence of files,
|
521 | for the duration of the hosting process.
|
522 |
|
523 | To clear these caches, use:
|
524 |
|
525 | ```js
|
526 | browserslist.clearCaches();
|
527 | ```
|
528 |
|
529 | To disable the caching altogether, set the `BROWSERSLIST_DISABLE_CACHE`
|
530 | environment variable.
|