Skip to content

Commit 2e3f7c4

Browse files
markgohofilipesilva
authored andcommitted
docs: add story about autoprefixer config
Those wishing to change which browsers are targeted for when css is prefixed can do so with a simple addition to their package.json file Close #5975
1 parent 5905e9a commit 2e3f7c4

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Change target browsers for Autoprefixer
2+
3+
Currently, the CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure compatibility
4+
with different browser and browser versions. You may find it necessary to target specific browsers
5+
or exclude certain browser versions from your build.
6+
7+
Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/ai/browserslist)
8+
to figure out which browsers to support with prefixing.
9+
10+
There are a few ways to tell Autoprefixer what browsers to target:
11+
12+
### Add a browserslist property to the `package.json` file
13+
```
14+
"browserslist": [
15+
"> 1%",
16+
"last 2 versions"
17+
]
18+
```
19+
20+
### Add a new file to the project directory called `.browserslistrc`
21+
```
22+
### Supported Browsers
23+
24+
> 1%
25+
last 2 versions
26+
```
27+
28+
Autoprefixer will look for the configuration file/property to use when it prefixes your css.
29+
Check out the [browserslist repo](https://github.com/ai/browserslist) for more examples of how to target
30+
specific browsers and versions.
31+
32+
_Side note:_
33+
Those who are seeking to produce a [progressive web app](https://developers.google.com/web/progressive-web-apps/) and are using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to grade the project will
34+
need to add the following browserslist config to their package.json file to eliminate the [old flexbox](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox) prefixes:
35+
36+
`package.json` config:
37+
```
38+
"browserslist": [
39+
"last 2 versions",
40+
"not ie <= 10",
41+
"not ie_mob <= 10"
42+
]
43+
```

0 commit comments

Comments
 (0)