[Parcel] - CSS Vendor Prefix 사용하기(with Autoprefixer)

Yejin Yang·2022년 5월 6일
0

[Bundler]

목록 보기
4/11
post-thumbnail

벤더 프리픽스(Vendor Prefix)

벤더 프리픽스(vendor prefix)란 크롬, 파이어폭스, 사파리 등 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.

아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 된다.

<style>
    .button {
        background: red;          <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
        background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
        background: -moz-linear-gradient(red, yellow);    <!-- 파이어폭스 3.6 이상을 위한 코드 -->
        background: -ms-linear-gradient(red, yellow);     <!-- 익스플로러 10.0 이상을 위한 코드 -->
        background: -o-linear-gradient(red, yellow);      <!-- 오페라 10.0 이상을 위한 코드 -->
        background: linear-gradient(red, yellow);         <!-- CSS 표준 문법 코드 -->
    }
</style>

autoprefixer 설치

공급업체 접두사를 각 속성별로 모두 외워 사용하는 것은 거의 불가능하기에 이를 자동으로 진행해주는 패키지가 autoprefixer이다.

$ npm i -D postcss autoprefixer
// 띄어쓰기로 구분하여 한번에 두개의 패키지 설치(postcss, autoprefixer)

설치하려니 npm 에러가 발생했다.
npm ERR! A complete log of this run can be found in:
force 플래그를 붙여도 비활성화 되어있다고 설치가 안되었다.
해결방법 : --legacy-peer-deps 붙이기

$ npm i -D postcss autoprefixer --legacy-peer-deps 

package.json 파일에 정상 설치 되었는지 확인해준다.

browerslist 옵션

현재 NPM 프로젝트에서 지원할 브라우저 범위를 명시하는 용도
그 명시를 autoprefixer 패키지가 활용하게 된다.

// package.json
"browserslist": [
    "> 1%", // 전세게 점유율 1% 이상인 브라우저 
    "last 2 versions" // 해당하는 브라우저의 마지막 두개의 버전 까지는 지원하겠다는 옵션
  ]

.postcssrc.js 파일 생성

마침표로 시작하는 rc(runtime configuration) 파일, 즉 구성 파일을 프로젝트 내부에 만들어 준다. 마침표로 시작하는 것은 구성 옵션이나 숨김 파일을 의미한다.
parcel 번들러가 파일을 찾아서 구성 옵션으로 사용

Nodejs는 CommonJS를 사용한다. CommonJS에서 가져오기, 내보내기 방식은 require, module.exports 이다.

CommonJS
웹 브라우저 밖의 자바스크립트를 위한 모듈 생태계의 규칙을 설립하기 위한 프로젝트이다.

// ESM(ECMAScript modules) - 브라우저 동작, import, export
// CommonJS - require, module.exports

// 가져오기 
const autoprefixer = require('autoprefixer');

// 내보내기
module.exports = {
  plugins: [
    autoprefixer
  ]
};

JS 문법으로 간소화 ver ⬇️

// 따로 변수에 담지 않고 함수 실행 구문을 plugins의 첫번째 배열 아이템으로 바로 실행
module.exports = {
  plugins: [
    require('autoprefixer')
  ],
};

autoprefixer 다운그레이드

개발 서버 실행

$ npm run dev

autoprefixer의 10버전과 PostCSS의 8버전이 충돌하여 에러 메시지가 뜬다.

undefined: PostCSS plugin autoprefixer requires PostCSS 8.

10버전인 autoprefixer를 PostCSS와 호환이 되도록 9버전으로 다운그레이드 해주면 해결된다.

$ npm i -D autoprefixer@9

다시 개발 서버 실행

$ npm run dev

autoprefixer 테스트

SCSS파일 h1태그에 비교적 최신 기술인display:flex 값을 준 뒤 테스트 해보고자 한다.

개발 서버 열어서 개발자 도구 확인

webkit과 ms라는 공급업체 접두사를 확인 할 수 있다.
현재 브라우저는 정상적으로 display:flex 가 작동하기 때문에 공급업체 기술은 실행이 되지 않는다.
만약 브라우저 환경이 구버전인 경우 공급업체에서 제공하는 기술이 처리해준다.


참고 사이트

http://tcpschool.com/css/css3_module_vendorPrefix

profile
Frontend developer

0개의 댓글