PostCSS 의 Autoprefixer 란 무엇인가?

개요

• Autoprefixer 는 PostCSS 플러그인 중 하나이다.
• CSS 를 파싱하고 vendor prefixes 를 추가한다.
  • Can I Use 로부터 얻은 결과를 이용한다.

사용 예

적용 전

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

위와 같이 vendor prefixes 가 포함되지 않은 CSS 를 작성하면,

적용 후

::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

위와 같이 vendor prefixes 가 추가된 CSS 가 결과로 나온다.

autoprefixer 온라인 에서 테스트가 가능하다.