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