Using CSS Post-processors

CSS has its limitations. CSS doesn't have proper versioning. So new specs get added to the different browsers in different ways. For example, the CSS grid is not supported in all browsers. You can check out the support of different HTML and CSS properties through this website.

Check out the support for CSS grid here

Usually, the browser starts with supporting new CSS specs through vendor prefixes. Then move it to proper CSS once the specs become CSS standards.

For example, linear-background is not supported in all browsers. So if you have a linear background in your CSS, then you need to add vendor prefixes and fallback background.

background: #b92b27; /* fallback for old browsers */
background: -webkit-linear-gradient(
  to bottom,
  #1565c0,
  #b92b27
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
  to bottom,
  #1565c0,
  #b92b27
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

But it is not always easy to write all your vendor prefixes on your own. Tracking all browser's progress in supporting different specs will be a hard task. There are tools to autogenerate those prefixes for your styles. Such processing are known as CSS post-processing. Those tools are called CSS post processors.

A very popular option is autoprefixer. Autoprefixer comes by default with create-react-app. If you check your application package.json file, there is a separate config browserlist. It dictates the react-scripts to post-process your CSS and add vendor prefixes based on your configurations.

Example browserlist configuration,

{
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

In this config, we target all the modern browsers that are not dead. We can have different configs for development and production. Usually, during development, you don't need to compile to support all browsers. You will test mostly in one or two different latest versions of browsers.

We have written a detailed blog post on CSS post-processor and autoprefixer configurations here.

This way, create-react-app will autogenerate vendor-prefixed CSS for your application. You can write the standard CSS for your code. React will handle the browser compatibility based on your code.