7948a5b4a66e0d8d8e69d241b875e2dd34d23029b8b9bbaf95c2e6da11cd5a9d0c947a3ccb81dc82dd847bb94764d6ebca605deb387c5d8eeb215d300af490 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. # Browserslist
  2. Library to share supported browsers list between different front-end tools.
  3. It is used in [Autoprefixer], [Stylelint], [eslint-plugin-compat]
  4. and [babel-env-preset].
  5. All tools that rely on Browserslist will find its config automatically,
  6. when you add the following to `package.json`:
  7. ```json
  8. {
  9. "browserslist": [
  10. "> 1%",
  11. "last 2 versions"
  12. ]
  13. }
  14. ```
  15. Or in `browserslist` config:
  16. ```yaml
  17. # Browsers that we support
  18. > 1%
  19. Last 2 versions
  20. IE 10 # sorry
  21. ```
  22. Developers set browsers list in queries like `last 2 version`
  23. to be free from updating browser versions manually.
  24. Browserslist will use [Can i Use] data for this queries.
  25. Browserslist will take browsers queries from tool option,
  26. `browserslist` config, `browserslist` section in `package.json`
  27. or environment variables.
  28. You can test Browserslist queries in [online demo].
  29. <a href="https://evilmartians.com/?utm_source=browserslist">
  30. <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
  31. alt="Sponsored by Evil Martians"
  32. width="236"
  33. height="54"
  34. \>
  35. </a>
  36. [eslint-plugin-compat]: https://github.com/amilajack/eslint-plugin-compat
  37. [babel-env-preset]: https://github.com/babel/babel-preset-env
  38. [Autoprefixer]: https://github.com/postcss/autoprefixer
  39. [online demo]: http://browserl.ist/
  40. [Stylelint]: http://stylelint.io/
  41. [Can I Use]: http://caniuse.com/
  42. ## Queries
  43. Browserslist will use browsers query from one of this sources:
  44. 1. Tool options. For example `browsers` option in Autoprefixer.
  45. 2. `BROWSERSLIST` environment variable.
  46. 3. `browserslist` config file in current or parent directories.
  47. 4. `browserslist` key in `package.json` file in current or parent directories.
  48. 5. If the above methods did not produce a valid result
  49. Browserslist will use defaults: `> 1%, last 2 versions, Firefox ESR`.
  50. We recommend to write queries in `browserslist` config or `package.json`.
  51. You can specify the versions by queries (case insensitive):
  52. * `last 2 versions`: the last 2 versions for each major browser.
  53. * `last 2 Chrome versions`: the last 2 versions of Chrome browser.
  54. * `> 5%`: versions selected by global usage statistics.
  55. * `> 5% in US`: uses USA usage statistics. It accepts [two-letter country code].
  56. * `> 5% in my stats`: uses [custom usage data].
  57. * `ie 6-8`: selects an inclusive range of versions.
  58. * `Firefox > 20`: versions of Firefox newer than 20.
  59. * `Firefox >= 20`: versions of Firefox newer than or equal to 20.
  60. * `Firefox < 20`: versions of Firefox less than 20.
  61. * `Firefox <= 20`: versions of Firefox less than or equal to 20.
  62. * `Firefox ESR`: the latest [Firefox ESR] version.
  63. * `iOS 7`: the iOS browser version 7 directly.
  64. * `not ie <= 8`: exclude browsers selected before by previous queries.
  65. You can add `not ` to any query.
  66. Browserslist works with separated versions of browsers.
  67. You should avoid queries like `Firefox > 0`.
  68. Multiple criteria are combined as a boolean `OR`. A browser version must match
  69. at least one of the criteria to be selected.
  70. All queries are based on the [Can I Use] support table,
  71. e.g. `last 3 iOS versions` might select `8.4, 9.2, 9.3` (mixed major and minor),
  72. whereas `last 3 Chrome versions` might select `50, 49, 48` (major only).
  73. [two-letter country code]: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
  74. [custom usage data]: #custom-usage-data
  75. [Can I Use]: http://caniuse.com/
  76. ## Browsers
  77. Names are case insensitive:
  78. ### Major Browsers
  79. * `Chrome` for Google Chrome.
  80. * `Firefox` or `ff` for Mozilla Firefox.
  81. * `Explorer` or `ie` for Internet Explorer.
  82. * `Edge` for Microsoft Edge.
  83. * `iOS` or `ios_saf` for iOS Safari.
  84. * `Opera` for Opera.
  85. * `Safari` for desktop Safari.
  86. * `ExplorerMobile` or `ie_mob` for Internet Explorer Mobile.
  87. ### Others
  88. * `Android` for Android WebView.
  89. * `BlackBerry` or `bb` for Blackberry browser.
  90. * `ChromeAndroid` or `and_chr` for Chrome for Android
  91. (in Other section, because mostly same as common `Chrome`).
  92. * `FirefoxAndroid` or `and_ff` for Firefox for Android.
  93. * `OperaMobile` or `op_mob` for Opera Mobile.
  94. * `OperaMini` or `op_mini` for Opera Mini.
  95. * `Samsung` for Samsung Internet.
  96. * `UCAndroid` or `and_uc` for UC Browser for Android.
  97. * `Electron` for Electron framework. It will be converted to Chrome version.
  98. ### Electron
  99. [`electron-to-chromium`](https://www.npmjs.com/package/electron-to-chromium)
  100. could return a compatible Browserslist query
  101. for your (major) Electron version:
  102. ```js
  103. const e2c = require('electron-to-chromium')
  104. autoprefixer({
  105. browsers: e2c.electronToBrowserList('1.4') //=> "Chrome >= 53"
  106. })
  107. ```
  108. ## Config File
  109. Browserslist config should be named `browserslist` and have browsers queries
  110. split by a new line. Comments starts with `#` symbol:
  111. ```yaml
  112. # Browsers that we support
  113. > 1%
  114. Last 2 versions
  115. IE 8 # sorry
  116. ```
  117. Browserslist will check config in every directory in `path`.
  118. So, if tool process `app/styles/main.css`, you can put config to root,
  119. `app/` or `app/styles`.
  120. You can specify direct path in `BROWSERSLIST_CONFIG` environment variables.
  121. ## `package.json`
  122. If you want to reduce config files in project root, you can specify
  123. browsers in `package.json` with `browserslist` key:
  124. ```js
  125. {
  126. "private": true,
  127. "dependencies": {
  128. "autoprefixer": "^6.5.4"
  129. },
  130. "browserslist": [
  131. "> 1%",
  132. "last 2 versions"
  133. ]
  134. }
  135. ```
  136. ## Environments
  137. You can also specify different browser queries for various environments.
  138. Browserslist will choose query according to `BROWSERSLIST_ENV` or `NODE_ENV`
  139. variables. If none of them is declared, Browserslist will firstly look
  140. for `development` queries and then use defaults.
  141. In `package.json`:
  142. ```js
  143. {
  144. "browserslist": {
  145. "production": [
  146. "last 2 version",
  147. "ie 9"
  148. ],
  149. "development": [
  150. "last 1 version"
  151. ]
  152. }
  153. }
  154. ```
  155. In `browserslist` config:
  156. ```ini
  157. [production]
  158. last 2 version
  159. ie 9
  160. [development]
  161. last 1 version
  162. ```
  163. ## Environment Variables
  164. If some tool use Browserslist inside, you can change browsers settings
  165. by [environment variables]:
  166. * `BROWSERSLIST` with browsers queries.
  167. ```sh
  168. BROWSERSLIST="> 5%" gulp css
  169. ```
  170. * `BROWSERSLIST_CONFIG` with path to config file.
  171. ```sh
  172. BROWSERSLIST_CONFIG=./config/browserslist gulp css
  173. ```
  174. * `BROWSERSLIST_ENV` with environments string.
  175. ```sh
  176. BROWSERSLIST_ENV="development" gulp css
  177. ```
  178. * `BROWSERSLIST_STATS` with path to the custom usage data
  179. for `> 1% in my stats` query.
  180. ```sh
  181. BROWSERSLIST_STATS=./config/usage_data.json gulp css
  182. ```
  183. [environment variables]: https://en.wikipedia.org/wiki/Environment_variable
  184. ## Custom Usage Data
  185. If you have a website, you can query against the usage statistics of your site:
  186. 1. Import your Google Analytics data into [Can I Use].
  187. Press `Import…` button in Settings page.
  188. 2. Open browser DevTools on [Can I Use] and paste this snippet
  189. into the browser console:
  190. ```js
  191. var e=document.createElement('a');e.setAttribute('href', 'data:text/plain;charset=utf-8,'+encodeURIComponent(JSON.stringify(JSON.parse(localStorage['usage-data-by-id'])[localStorage['config-primary_usage']])));e.setAttribute('download','stats.json');document.body.appendChild(e);e.click();document.body.removeChild(e);
  192. ```
  193. 3. Save the data to a `browserslist-stats.json` file in your project.
  194. Of course, you can generate usage statistics file by any other method.
  195. File format should be like:
  196. ```js
  197. {
  198. "ie": {
  199. "6": 0.01,
  200. "7": 0.4,
  201. "8": 1.5
  202. },
  203. "chrome": {
  204. },
  205. }
  206. ```
  207. Note that you can query against your custom usage data
  208. while also querying against global or regional data.
  209. For example, the query `> 1% in my stats, > 5% in US, 10%` is permitted.
  210. [Can I Use]: http://caniuse.com/
  211. ## JS API
  212. ```js
  213. var browserslist = require('browserslist');
  214. // Your CSS/JS build tool code
  215. var process = function (source, opts) {
  216. var browsers = browserslist(opts.browsers, {
  217. stats: opts.stats,
  218. path: opts.file,
  219. env: opts.env
  220. });
  221. // Your code to add features for selected browsers
  222. }
  223. ```
  224. Queries can be a string `"> 5%, last 1 version"`
  225. or an array `['> 5%', 'last 1 version']`.
  226. If a query is missing, Browserslist will look for a config file.
  227. You can provide a `path` option (that can be a file) to find the config file
  228. relatively to it.
  229. For non-JS environment and debug purpose you can use CLI tool:
  230. ```sh
  231. browserslist "> 1%, last 2 versions"
  232. ```
  233. ## Coverage
  234. You can get total users coverage for selected browsers by JS API:
  235. ```js
  236. browserslist.coverage(browserslist('> 1%')) //=> 81.4
  237. ```
  238. ```js
  239. browserslist.coverage(browserslist('> 1% in US'), 'US') //=> 83.1
  240. ```
  241. Or by CLI:
  242. ```sh
  243. $ browserslist --coverage "> 1%"
  244. These browsers account for 81.4% of all users globally
  245. ```
  246. ```sh
  247. $ browserslist --coverage=US "> 1% in US"
  248. These browsers account for 83.1% of all users in the US
  249. ```