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