Skip to content

Autoprefixer

브라우저 벤더에 맞는 CSS Prefix를 추가해 준다.

Can I Use 에 등록되어 있는 CSS 속성의 vendor-prefix를 접속하는 브라우저에 따라 자동으로 붙여준다. 브라우저는 browserlist 설정을 참조한다.

Troubleshooting

적용 상태를 관측하고 싶을 때

create-react-app (v5) 같은 경우 적용되어 있다고 하는데 잘 적용되는지 안보일 때가 있다. 이 때 browserlist 설정을 상위 0.2%에서 0.01%로 바꾸면 잘 적용된다. 

{
  ...

  "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]"
}

App.module.scss 파일 내용이: 

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

다음과 같이 변경된다: (Chrome 개발자 모드 등으로 확인 가능) 

.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