PostCSS Plugin 소개 - Autoprefixer

첫째로 소개할 플러그인은 'autoprefixer' 라는 플러그인이다.

PostCSS에서 가장 많이 사용되며 공식페이지 방문시 가장 먼저 노출될 정도로 인기가 많은 플러그인이다.

 

1. 어떤 기능을 가지고 있는가?

'Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.'

공식 홈페이지에는 상단처럼 적혀있는데, 'Can I Use'(https://caniuse.com/) 에 등록되어 있는 CSS 속성의 vendor-prefix를 접속하는 브라우저에 따라 자동으로 붙여준다는 의미다.

 

2. 설치

Vue cli 3.0 에서는 기본적으로 설치되어 있으나, 미설치 상태인 경우 아래의 커맨드를 파워쉘에 입력하면 된다.

 - npm i autoprefixer

3. postcss.config.js 수정하기

1) require 안에 'autoprefixer' 를 넣어준다.

2) 그 안의 browsers 옵션을 생성 한 후, 본인이 적용하고 싶은 브라우저 값을 배열로 나열하면 된다.

2-1) 위의 경우 점유율 1% 이상 혹은 모든 브라우저의 최근 2 버젼 이라고 설정한 상태다.

2-2) https://github.com/browserslist/browserslist에서 browserlist에 대한 옵션값을 더 확인할 수 있다.

 

4. 적용 예

위와 같이 CSS를 작성 한 후, autoprefixer를 적용시키면, 아래처럼 자동으로 추가, 변환된다.