mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-03-30 17:04:14 +08:00
0f4781e850
"on" value of "autoprefixer grid" is kinda deprecated. It's better to use "autoplace" or "no-autoplace" instead. https://github.com/postcss/autoprefixer#options "autoplace" enables PostCss' autoplace polyfill for ie and makes prefixes, "no-autoplace" only makes prefixes https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie
44 lines
1.8 KiB
Markdown
44 lines
1.8 KiB
Markdown
---
|
||
id: post-processing-css
|
||
title: Post-Processing CSS
|
||
---
|
||
|
||
This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it.
|
||
|
||
Support for new CSS features like the [`all` property](https://developer.mozilla.org/en-US/docs/Web/CSS/all), [`break` properties](https://www.w3.org/TR/css-break-3/#breaking-controls), [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), and [media query ranges](https://www.w3.org/TR/mediaqueries-4/#range-context) are automatically polyfilled to add support for older browsers.
|
||
|
||
You can customize your target support browsers by adjusting the `browserslist` key in `package.json` according to the [Browserslist specification](https://github.com/browserslist/browserslist#readme).
|
||
|
||
For example, this:
|
||
|
||
```css
|
||
.App {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
```
|
||
|
||
becomes this:
|
||
|
||
```css
|
||
.App {
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-orient: horizontal;
|
||
-webkit-box-direction: normal;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-webkit-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
}
|
||
```
|
||
|
||
If you need to disable autoprefixing for some reason, [follow this section](https://github.com/postcss/autoprefixer#disabling).
|
||
|
||
[CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) prefixing is disabled by default, but it will **not** strip manual prefixing.
|
||
If you'd like to opt-in to CSS Grid prefixing, [first familiarize yourself about its limitations](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie).<br>
|
||
To enable CSS Grid prefixing, add `/* autoprefixer grid: autoplace */` to the top of your CSS file.
|