HTML&CSS

벤더 프리픽스(Vendor Prefix)의 이해

apost 2020. 10. 20. 16:25

CSS 표준으로 확정되기 전, 또는 표준은 아니지만 특정 브라우저에서만 지원되는 CSS 속성을 사용하기 위해서 제공되는 기능입니다.

또는, CSS 표준에 대한 속성 구현이 특정 브라우저에서는 다르게 된 경우, 해당 브라우저를 위한 별도의 속성 값을 지정할 때도 사용할 수 있습니다. 

 

벤더 프리픽스는 한글로 "공급사 접두어" 정도로 표현할 수 있습니다.

CSS 호환성을 위해 전용의 CSS 속성을 부여할 수 있도록 웹 브라우저 제조사 별로 제공할 수 있도록 제공되는 표준 CSS 속성 기술 방법입니다.

같은 CSS 속성을 브라우저 종류에 따라 따라 다르게 적용되도록 별도의 접두어를 속성명 앞에 붙여서 해당 브라우저가 속성을 인식하고 사용하도록 할 수 있습니다.

 

예를 들어 다음과 같이 벤더 프리픽스를 표현할 수 있습니다.

 

.box{
  display: -ms-grid;
  display: grid;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

 

이렇게 프리픽스를 사용해 웹킷(-webkit-)과 오페라(-o-)) 브라우저를 위한 별도의 트랜지션(Transition) 속성을 추가한 경우, 벤더 프리픽스 "-webkit"을 인식하는 브라우저에서는 앞서 정의된 "-webkit-transition" 속성이 적용되어 0.5초 동안 트랜지션이 적용됩니다.

단, CSS 속성은 속성이 오는 순서에 따라 순차적으로 적용되기 때문에 벤더 프리픽스가 붙은 속성과 표준 속성이 모두 있을 경우 나중에 나오는 속성이 적용됩니다.

앞의 예는 최종적으로 "transition: all .5s;" 속성이 적용됩니다.

 

 

표준 속성의 적용을 우선해야 하므로, 벤더 프리픽스가 있는 속성은 표준 속성 앞쪽에 표시하는 것이 원칙입니다.

 

웹 브라우저 시장의 경쟁이 구글 크롬 중심으로 정리가 되고, 주요 웹 브라우저들이 최신 CSS 표준을 빠르게 지원하면서 벤더 프리픽스는 점차 사용되지 않는 추세이며, 벤더 프리픽스를 사용할 필요성도 점차 줄어들고 있습니다.

 

웹 브라우저 제조사별 벤더 프리픽스는 다음과 같습니다.

모질라 파이어폭스를 제외한 나머지 신형 데스크탑, 모바일 브라우저는 모두 "-webkit-" 을 사용한다고 보면 되며, 웹킷 기반의 엔진을 공통으로 사용하기 때문에 벤더 프리픽스를 따로 붙일 필요가 없습니다.

벤더 프리픽스 웹 브라우저
-webkit- 구글 크롬
안드로이드 내장 브라우저
구글 크롬 for Android
사파리
사파리 for iOS
오페라 신버전
파이어폭스 for iOS
-webkit-user-select: none;
-moz- 파이어폭스 -moz-user-select: none;
-ms- 인터넷 익스플로러
구형 엣지
-ms-user-select: none;
-o- 오페라 구버전 -o-user-select: none;

 

벤더 프리픽스를 사용해야 하는 경우, 벤더에 따라 속성 값이 달라지는 경우가 있는데, 일일이 다 외울 수는 없습니다.

벤더 프리픽스가 주로 사용되는 속성은 변형(Transform), 변환(Transition), 애니메이션(Animation), 그라데이션(Gradient) 등 사용 빈도가 낮은 속성들입니다.

이 속성들은 속성 값 자체가 복잡하기 때문에 벤더 프리픽스를 자동으로 추가해주는 서비스를 이용해 사용하는 것을 추천합니다.

autoprefixer.github.io/

 

Autoprefixer CSS online

include comment with configuration to the result Select result Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used by Twitter

autoprefixer.github.io

대표적인 서비스로 표준 CSS 속성값을 기술하면, 자동으로 벤더 프리픽스가 붙은 CSS로 변환한 결과를 표시해줍니다.

 

Autoprefixer CSS online