Autoprefixer

 

Autoprefixer

prefixer(공급업체 접두사) 자동 설정 기능

PostCSS의 플러그인 중 하나로, CSS를 파싱하고 벤더 프리픽스(vendor prefixes)를 자동으로 추가해주는 도구

 

 

1. 호환성 보장

• 최신 css 속성이나 값을 사용해도, 최신 css 문법을 지원하지 않는 구형 브라우저에서도 동작할 수 있게 해줌
• 하위 호환성에 대한 걱정 ⬇️

2. 자동화된 프로세스

• 수동으로 각 브라우저별 프리픽스를 추가할 필요가 없음  → 시간 절약, 인적 오류 가능성 낮음

3. 유지보수 용이성

• 브라우저 지원 정보가 업데이트 되면, Autoprefixer도 자동으로 조정됨

4. 크로스 브라우징 대응

• 다양한 브라우저 환경에서 일관된 사용자 경험 제공

 

npm i -D postcss autoprefixer postcss-loader

webpack.config.js 설정

module 옵션 내에 해당 내용 추가

순.서 중.요!

 

package.json 에 browserslist 추가

"> 1%" : 전 세계 1% 이상의 브라우저에서

"last 2 versions" :  마지막 2개의 버전을 지원

 

postcss.config.js 파일을 프로젝트 루트 경로에 생성

 

 

공급업체 접두사 생성 완료