Blame: docusaurus/docs/post-processing-css.md - facebook/create-react-app

Set up a modern web app by running one command.

103735 0 8 JavaScript

-												Move post-processing css to its own file

											
										
										
											2018-10-07 19:36:38 +02:00
+								---
 								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.
-												Port documentation updates

											
										
										
											2018-10-19 19:30:11 -04:00
+								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).
-												Move post-processing css to its own file

											
										
										
											2018-10-07 19:36:38 +02:00
 								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.
-												Upgrade to docusaurus 2 (#7785)

* chore: upgrade to docusaurus 2

* address review

											
										
										
											2019-10-15 23:37:32 +07:00
+								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).
-												Fix control comment fo CSS Grid prefixing (#6061)

"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
											
										
										
											2018-12-24 00:59:01 +05:00
+								To enable CSS Grid prefixing, add `/* autoprefixer grid: autoplace */` to the top of your CSS file.