Skip to content
Search

Autoprefixer

lastmod 2023-03-07created 2023-03-075 edits

Adds CSS prefixes matching each browser vendor.

Automatically adds vendor prefixes to CSS properties registered in Can I Use, depending on the browser accessing the site. Browsers are determined by the browserlist configuration.

Troubleshooting

When you want to observe whether it is applied

create-react-app (v5) reportedly has it applied, but sometimes it doesn't look like it is applied properly. In that case, changing the browserlist setting from the top 0.2% to 0.01% makes it apply properly. 

{
  ...

  "browserslist": {
    "production": [
      ">0.01%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      ">0.01%",
      "last 2 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 1 edge version"
    ]
  },
  "packageManager": "[email protected]"
}

The contents of the App.module.scss file: 

.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

are changed as follows: (can be checked with Chrome developer mode, etc.) 

.App_App__2\+VHF {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

See also

Favorite site

author Zer0 sitemap