nav tabs on admin dashboard
This commit is contained in:
+205
-92
@@ -1,27 +1,30 @@
|
||||
# Browserslist
|
||||
# Browserslist [![Cult Of Martians][cult-img]][cult]
|
||||
|
||||
<img align="right" width="120" height="120"
|
||||
src="./logo.svg" alt="Browserslist logo by Anton Lovchikov">
|
||||
<img width="120" height="120" alt="Browserslist logo by Anton Lovchikov"
|
||||
src="https://browserslist.github.io/browserslist/logo.svg" align="right">
|
||||
|
||||
Library to share target browsers between different front-end tools.
|
||||
It is used in:
|
||||
The config to share target browsers and Node.js versions between different
|
||||
front-end tools. It is used in:
|
||||
|
||||
* [Autoprefixer]
|
||||
* [babel-preset-env]
|
||||
(external config in `package.json` or `browserslist` will be supported in 7.0)
|
||||
* [Babel]
|
||||
* [postcss-preset-env]
|
||||
* [eslint-plugin-compat]
|
||||
* [stylelint-no-unsupported-browser-features]
|
||||
* [postcss-normalize]
|
||||
* [obsolete-webpack-plugin]
|
||||
|
||||
All tools that rely on Browserslist will find its config automatically,
|
||||
when you add the following to `package.json`:
|
||||
[Browserslist Example] shows how every tool uses Browserslist.
|
||||
All tools will find target browsers automatically,
|
||||
when you add the following to `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"browserslist": [
|
||||
"last 1 version",
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
"maintained node versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
```
|
||||
@@ -31,73 +34,137 @@ Or in `.browserslistrc` config:
|
||||
```yaml
|
||||
# Browsers that we support
|
||||
|
||||
last 1 version
|
||||
> 1%
|
||||
Last 2 versions
|
||||
IE 10 # sorry
|
||||
maintained node versions
|
||||
not dead
|
||||
```
|
||||
|
||||
Developers set browsers list in queries like `last 2 version`
|
||||
to be free from updating browser versions manually.
|
||||
Browserslist will use [Can I Use] data for this queries.
|
||||
Developers set versions list in queries like `last 2 version`
|
||||
to be free from updating versions manually.
|
||||
Browserslist will use [Can I Use] data for this queries.
|
||||
|
||||
Browserslist will take browsers queries from tool option,
|
||||
Browserslist will take queries from tool option,
|
||||
`browserslist` config, `.browserslistrc` config,
|
||||
`browserslist` section in `package.json` or environment variables.
|
||||
`browserslist` section in `package.json` or environment variables.
|
||||
|
||||
You can test Browserslist queries in [online demo].
|
||||
|
||||
[cult-img]: https://cultofmartians.com/assets/badges/badge.svg
|
||||
[cult]: https://cultofmartians.com/done.html
|
||||
|
||||
<a href="https://evilmartians.com/?utm_source=browserslist">
|
||||
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
|
||||
alt="Sponsored by Evil Martians"
|
||||
width="236"
|
||||
height="54"
|
||||
\>
|
||||
alt="Sponsored by Evil Martians" width="236" height="54">
|
||||
</a>
|
||||
|
||||
[stylelint-no-unsupported-browser-features]: https://github.com/ismay/stylelint-no-unsupported-browser-features
|
||||
[eslint-plugin-compat]: https://github.com/amilajack/eslint-plugin-compat
|
||||
[postcss-preset-env]: https://github.com/jonathantneal/postcss-preset-env
|
||||
[babel-preset-env]: https://github.com/babel/babel/tree/master/packages/babel-preset-env
|
||||
[Browserslist Example]: https://github.com/browserslist/browserslist-example
|
||||
[postcss-preset-env]: https://github.com/jonathantneal/postcss-preset-env
|
||||
[postcss-normalize]: https://github.com/jonathantneal/postcss-normalize
|
||||
[Autoprefixer]: https://github.com/postcss/autoprefixer
|
||||
[online demo]: http://browserl.ist/
|
||||
[Can I Use]: http://caniuse.com/
|
||||
[online demo]: https://browserl.ist/
|
||||
[Can I Use]: https://caniuse.com/
|
||||
[Babel]: https://github.com/babel/babel/tree/master/packages/babel-preset-env
|
||||
[obsolete-webpack-plugin]: https://github.com/ElemeFE/obsolete-webpack-plugin
|
||||
|
||||
## Tools
|
||||
|
||||
* [`browserslist-ga`] downloads your website browsers statistics
|
||||
to use it in `> 0.5% in my stats` query.
|
||||
* [`browserslist-useragent`] checks browser by user agent string
|
||||
to match Browserslist target browsers query.
|
||||
* [`browserslist-useragent-ruby`] is a Ruby library to checks browser
|
||||
by user agent string to match Browserslist.
|
||||
* [`caniuse-api`] returns browsers which support some specific feature.
|
||||
* Run `npx browserslist` in your project directory to see project’s
|
||||
target browsers. This CLI tool is built-in and available in any project
|
||||
with Autoprefixer.
|
||||
|
||||
[`browserslist-useragent`]: https://github.com/pastelsky/browserslist-useragent
|
||||
[`caniuse-api`]: https://github.com/Nyalab/caniuse-api
|
||||
[`browserslist-useragent-ruby`]: https://github.com/browserslist/browserslist-useragent-ruby
|
||||
[`browserslist-useragent`]: https://github.com/pastelsky/browserslist-useragent
|
||||
[`browserslist-ga`]: https://github.com/browserslist/browserslist-ga
|
||||
[`caniuse-api`]: https://github.com/Nyalab/caniuse-api
|
||||
|
||||
|
||||
## Queries
|
||||
|
||||
Browserslist will use browsers query from one of this sources:
|
||||
Browserslist will use browsers and Node.js versions query
|
||||
from one of this sources:
|
||||
|
||||
1. Tool options. For example `browsers` option in Autoprefixer.
|
||||
2. `BROWSERSLIST` environment variable.
|
||||
3. `browserslist` config file in current or parent directories.
|
||||
3. `.browserslistrc` config file in current or parent directories.
|
||||
4. `browserslist` key in `package.json` file in current or parent directories.
|
||||
1. `browserslist` key in `package.json` file in current or parent directories.
|
||||
**We recommend this way.**
|
||||
5. If the above methods did not produce a valid result
|
||||
Browserslist will use defaults: `> 1%, last 2 versions, Firefox ESR`.
|
||||
2. Tool options. For example `browsers` option in Autoprefixer.
|
||||
3. `BROWSERSLIST` environment variable.
|
||||
4. `browserslist` config file in current or parent directories.
|
||||
5. `.browserslistrc` config file in current or parent directories.
|
||||
6. If the above methods did not produce a valid result
|
||||
Browserslist will use defaults:
|
||||
`> 0.5%, last 2 versions, Firefox ESR, not dead`.
|
||||
|
||||
You can specify the versions by queries (case insensitive):
|
||||
|
||||
* `last 2 versions`: the last 2 versions for each browser.
|
||||
* `last 2 Chrome versions`: the last 2 versions of Chrome browser.
|
||||
* `> 5%`: versions selected by global usage statistics.
|
||||
### 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 the previous query: `last 1 version and > 1%`.
|
||||
|
||||
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 the is no left-hand
|
||||
side query to combine it with.
|
||||
|
||||
| Query combiner type | Illustration | Example |
|
||||
| ------------------- | :----------: | ------- |
|
||||
|`or`/ `,` combiner <br> (union) |  | `'> .5% or last 2 versions'` <br> `'> .5%, last 2 versions'` |
|
||||
| `and` combiner <br> (intersection) |  | `'> .5% and last 2 versions'` |
|
||||
| `not` combiner <br> (relative complement) |  | `'> .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._
|
||||
|
||||
|
||||
### Best Practices
|
||||
|
||||
* 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.
|
||||
* If you want to change the default set of browsers we recommend to combine
|
||||
`last 1 version`, `not dead` with `> 0.2%` (or `> 1% in US`,
|
||||
`> 1% in my stats`). `last n versions` adds too many dead browsers
|
||||
and does not add popular old versions. Choosing 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.
|
||||
* 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 altogether.
|
||||
|
||||
|
||||
### Full List
|
||||
|
||||
You can specify the browser and Node.js versions by queries (case insensitive):
|
||||
|
||||
* `> 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].
|
||||
* `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].
|
||||
* `maintained node versions`: all Node.js versions, which are [still maintained]
|
||||
by Node.js Foundation.
|
||||
* `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.
|
||||
* `extends browserslist-config-mycompany`: take queries from
|
||||
`browserslist-config-mycompany` npm package.
|
||||
* `ie 6-8`: selects an inclusive range of versions.
|
||||
@@ -111,10 +178,19 @@ You can specify the versions by queries (case insensitive):
|
||||
all minor/patch releases of last 2 major versions.
|
||||
* `since 2015` or `last 2 years`: all versions released since year 2015
|
||||
(also `since 2015-03` and `since 2015-03-10`).
|
||||
* `dead`: browsers from `last 2 version` query, but with less than 0.5%
|
||||
in global usage statistics and without official support or updates
|
||||
for 24 months. Right now it is `IE 10`, `IE_Mob 10`, `BlackBerry 10`,
|
||||
`BlackBerry 7`, 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.
|
||||
* `defaults`: Browserslist’s default browsers
|
||||
(`> 0.5%, last 2 versions, Firefox ESR, not dead`).
|
||||
* `not ie <= 8`: exclude browsers selected by previous queries.
|
||||
|
||||
You can add `not ` to any query.
|
||||
|
||||
|
||||
### Debug
|
||||
|
||||
Run `npx browserslist` in project directory to see what browsers was selected
|
||||
@@ -138,22 +214,23 @@ safari 11
|
||||
samsung 5
|
||||
```
|
||||
|
||||
|
||||
### Notes
|
||||
|
||||
Browserslist works with separated versions of browsers.
|
||||
You should avoid queries like `Firefox > 0`.
|
||||
|
||||
Multiple criteria are combined as a boolean `OR`. A browser version must match
|
||||
at least one of the criteria to be selected.
|
||||
The list of the specified browsers acts as a white list which means other browsers are ignored.
|
||||
|
||||
All queries are based on the [Can I Use] support table,
|
||||
e.g. `last 3 iOS versions` might select `8.4, 9.2, 9.3` (mixed major and minor),
|
||||
whereas `last 3 Chrome versions` might select `50, 49, 48` (major only).
|
||||
|
||||
[`caniuse-lite/data/regions`]: https://github.com/ben-eb/caniuse-lite/tree/master/data/regions
|
||||
[two-letter country code]: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
|
||||
[two-letter country code]: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
|
||||
[custom usage data]: #custom-usage-data
|
||||
[Can I Use]: http://caniuse.com/
|
||||
[still maintained]: https://github.com/nodejs/Release
|
||||
[Can I Use]: https://caniuse.com/
|
||||
|
||||
|
||||
### Browsers
|
||||
|
||||
@@ -171,6 +248,7 @@ Names are case insensitive:
|
||||
* `Firefox` or `ff` for Mozilla Firefox.
|
||||
* `FirefoxAndroid` or `and_ff` for Firefox for Android.
|
||||
* `iOS` or `ios_saf` for iOS Safari.
|
||||
* `Node` for Node.js.
|
||||
* `Opera` for Opera.
|
||||
* `OperaMini` or `op_mini` for Opera Mini.
|
||||
* `OperaMobile` or `op_mob` for Opera Mobile.
|
||||
@@ -179,6 +257,7 @@ Names are case insensitive:
|
||||
* `Samsung` for Samsung Internet.
|
||||
* `UCAndroid` or `and_uc` for UC Browser for Android.
|
||||
|
||||
|
||||
## `package.json`
|
||||
|
||||
If you want to reduce config files in project root, you can specify
|
||||
@@ -191,12 +270,14 @@ browsers in `package.json` with `browserslist` key:
|
||||
"autoprefixer": "^6.5.4"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 1 version",
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
"IE 10"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Config File
|
||||
|
||||
Browserslist config should be named `.browserslistrc` or `browserslist`
|
||||
@@ -205,9 +286,9 @@ and have browsers queries split by a new line. Comments starts with `#` symb
|
||||
```yaml
|
||||
# Browsers that we support
|
||||
|
||||
last 1 version
|
||||
> 1%
|
||||
Last 2 versions
|
||||
IE 8 # sorry
|
||||
IE 10 # sorry
|
||||
```
|
||||
|
||||
Browserslist will check config in every directory in `path`.
|
||||
@@ -216,6 +297,7 @@ So, if tool process `app/styles/main.css`, you can put config to root,
|
||||
|
||||
You can specify direct path in `BROWSERSLIST_CONFIG` environment variables.
|
||||
|
||||
|
||||
## Shareable Configs
|
||||
|
||||
You can use the following query to reference an exported Browserslist config
|
||||
@@ -254,11 +336,13 @@ When writing a shared Browserslist package, just export an array.
|
||||
|
||||
```js
|
||||
module.exports = [
|
||||
'last 2 versions',
|
||||
'ie 9'
|
||||
'last 1 version',
|
||||
'> 1%',
|
||||
'ie 10'
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
## Environment Variables
|
||||
|
||||
If some tool use Browserslist inside, you can change browsers settings
|
||||
@@ -297,23 +381,25 @@ by [environment variables]:
|
||||
|
||||
[environment variables]: https://en.wikipedia.org/wiki/Environment_variable
|
||||
|
||||
|
||||
## Environments
|
||||
|
||||
You can also specify different browser queries for various environments.
|
||||
Browserslist will choose query according to `BROWSERSLIST_ENV` or `NODE_ENV`
|
||||
variables. If none of them is declared, Browserslist will firstly look
|
||||
for `development` queries and then use defaults.
|
||||
for `production` queries and then use defaults.
|
||||
|
||||
In `package.json`:
|
||||
|
||||
```js
|
||||
"browserslist": {
|
||||
"production": [
|
||||
"last 2 version",
|
||||
"ie 9"
|
||||
"> 1%",
|
||||
"ie 10"
|
||||
],
|
||||
"development": [
|
||||
"last 1 version"
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version"
|
||||
]
|
||||
}
|
||||
```
|
||||
@@ -321,27 +407,25 @@ In `package.json`:
|
||||
In `.browserslistrc` config:
|
||||
|
||||
```ini
|
||||
[production]
|
||||
last 2 version
|
||||
ie 9
|
||||
[production staging]
|
||||
> 1%
|
||||
ie 10
|
||||
|
||||
[development]
|
||||
last 1 version
|
||||
last 1 chrome version
|
||||
last 1 firefox version
|
||||
```
|
||||
|
||||
|
||||
## Custom Usage Data
|
||||
|
||||
If you have a website, you can query against the usage statistics of your site:
|
||||
If you have a website, you can query against the usage statistics of your site.
|
||||
[`browserslist-ga`] will ask access to Google Analytics and then generate
|
||||
`browserslist-stats.json`:
|
||||
|
||||
1. Import your Google Analytics data into [Can I Use].
|
||||
Press `Import…` button in Settings page.
|
||||
2. Open browser DevTools on [Can I Use] and paste this snippet
|
||||
into the browser console:
|
||||
|
||||
```js
|
||||
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);
|
||||
```
|
||||
3. Save the data to a `browserslist-stats.json` file in your project.
|
||||
```
|
||||
npx browserslist-ga
|
||||
```
|
||||
|
||||
Of course, you can generate usage statistics file by any other method.
|
||||
File format should be like:
|
||||
@@ -364,27 +448,9 @@ Note that you can query against your custom usage data
|
||||
while also querying against global or regional data.
|
||||
For example, the query `> 1% in my stats, > 5% in US, 10%` is permitted.
|
||||
|
||||
[Can I Use]: http://caniuse.com/
|
||||
[`browserslist-ga`]: https://github.com/browserslist/browserslist-ga
|
||||
[Can I Use]: https://caniuse.com/
|
||||
|
||||
## Webpack
|
||||
|
||||
If you plan to use Browserslist on client-side (e. g., tools like CodePen)
|
||||
Browserslist could take big part of your bundle (150 KB).
|
||||
|
||||
But the biggest part of this size will be region usage statistics, which could
|
||||
be useless for you. `IgnorePlugin` could cut it:
|
||||
|
||||
```js
|
||||
const webpackConfig = {
|
||||
…
|
||||
plugins: [
|
||||
new webpack.IgnorePlugin(/caniuse-lite\/data\/regions/)
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
This plugin will reduce Browserslist size from 150 KB to 6 KB. But you loose
|
||||
`> 1% in US` queries support.
|
||||
|
||||
## JS API
|
||||
|
||||
@@ -402,29 +468,53 @@ var process = function (source, opts) {
|
||||
}
|
||||
```
|
||||
|
||||
Queries can be a string `"> 5%, last 1 version"`
|
||||
or an array `['> 5%', 'last 1 version']`.
|
||||
Queries can be a string `"> 1%, IE 10"`
|
||||
or an array `['> 1%', 'IE 10']`.
|
||||
|
||||
If a query is missing, Browserslist will look for a config file.
|
||||
You can provide a `path` option (that can be a file) to find the config file
|
||||
relatively to it.
|
||||
|
||||
Options:
|
||||
|
||||
* `path`: file or a directory path to look for config file. Default is `.`.
|
||||
* `env`: what environment section use from config. Default is `production`.
|
||||
* `stats`: custom usage statistics data.
|
||||
* `config`: path to config if you want to set it manually.
|
||||
* `ignoreUnknownVersions`: do not throw on direct query (like `ie 12`).
|
||||
Default is `false.`
|
||||
* `dangerousExtend`: Disable security checks for `extend` query.
|
||||
Default is `false.`
|
||||
|
||||
For non-JS environment and debug purpose you can use CLI tool:
|
||||
|
||||
```sh
|
||||
browserslist "> 1%, last 2 versions"
|
||||
browserslist "> 1%, IE 10"
|
||||
```
|
||||
|
||||
|
||||
## Coverage
|
||||
|
||||
You can get total users coverage for selected browsers by JS API:
|
||||
|
||||
```js
|
||||
browserslist.coverage(browserslist('> 1%')) //=> 81.4
|
||||
browserslist.coverage(browserslist('> 1%'))
|
||||
//=> 81.4
|
||||
```
|
||||
|
||||
```js
|
||||
browserslist.coverage(browserslist('> 1% in US'), 'US') //=> 83.1
|
||||
browserslist.coverage(browserslist('> 1% in US'), 'US')
|
||||
//=> 83.1
|
||||
```
|
||||
|
||||
```js
|
||||
browserslist.coverage(browserslist('> 1% in my stats'), 'my stats')
|
||||
//=> 83.1
|
||||
```
|
||||
|
||||
```js
|
||||
browserslist.coverage(browserslist('> 1% in my stats', { stats }), stats)
|
||||
//=> 82.2
|
||||
```
|
||||
|
||||
Or by CLI:
|
||||
@@ -439,6 +529,17 @@ $ browserslist --coverage=US "> 1% in US"
|
||||
These browsers account for 83.1% of all users in the US
|
||||
```
|
||||
|
||||
```sh
|
||||
$ browserslist --coverage "> 1% in my stats"
|
||||
These browsers account for 83.1% of all users in custom statistics
|
||||
```
|
||||
|
||||
```sh
|
||||
$ browserslist --coverage "> 1% in my stats" --stats=./stats.json
|
||||
These browsers account for 83.1% of all users in custom statistics
|
||||
```
|
||||
|
||||
|
||||
## Cache
|
||||
|
||||
Browserslist caches the configuration it reads from `package.json` and
|
||||
@@ -453,3 +554,15 @@ browserslist.clearCaches();
|
||||
|
||||
To disable the caching altogether, set the `BROWSERSLIST_DISABLE_CACHE`
|
||||
environment variable.
|
||||
|
||||
|
||||
## Contributors
|
||||
|
||||
<img src="https://sourcerer.io/fame/ai/browserslist/browserslist/images/0" alt="" width="76" height="90" align="left">
|
||||
<img src="https://sourcerer.io/fame/ai/browserslist/browserslist/images/1" alt="" width="76" height="90" align="left">
|
||||
<img src="https://sourcerer.io/fame/ai/browserslist/browserslist/images/2" alt="" width="76" height="90" align="left">
|
||||
<img src="https://sourcerer.io/fame/ai/browserslist/browserslist/images/3" alt="" width="76" height="90" align="left">
|
||||
<img src="https://sourcerer.io/fame/ai/browserslist/browserslist/images/4" alt="" width="76" height="90" align="left">
|
||||
<img src="https://sourcerer.io/fame/ai/browserslist/browserslist/images/5" alt="" width="76" height="90" align="left">
|
||||
<img src="https://sourcerer.io/fame/ai/browserslist/browserslist/images/6" alt="" width="76" height="90" align="left">
|
||||
<img src="https://sourcerer.io/fame/ai/browserslist/browserslist/images/7" alt="" width="76" height="90" align="left">
|
||||
|
||||
Reference in New Issue
Block a user