autoprefixer

autoprefixer 란?

 

https://www.caniuse.com/ 에서 확인할 수 있는 CSS 속성의 벤더 프리픽스(vendor prefix)를 사용자의 브라우저에 따라 자동으로 붙여주는 플러그인 이다.

 

그럼 벤더 프리픽스는 무엇일까?

벤더 프리픽스는 주요 웹 브라우저가의 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사를 의미한다. 아직 CSS 권고안에 포함되지 못하거나, 포함은 되었으나 완전히 제정된 상태가 아닌 기능을 사용할 때 벤더 프리픽스를 사용한다. 

 

 

설치

 

postcss가 설치되어 있지 않다면 같이 설치해주자.

npm i -D postcss autoprefixer

 

 

설정

 

 

//package.json

... 생략

"browserslist": [
  "> 1%",
  "last 2 versions"
]

 

전 세계에서 점유율이 1% 이상 되는 브라우저들의 마지막 2번째 버전까지 지원한다는 의미이다.

이 설정을 해줘야 하는 이유는 autoprefixer에서 이 옵션을 가지고 설정하기 때문이다.

 

// .postcssrc.js

const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [
    autoprefixer
  ]
}

 

그 후 .postcssrc.js 파일을 위와같이 작성해 준다.