CSS - 벤더 프리픽스 (Vendor Prefix)

 CSS 그라디언트에 –moz- 나 –webkit- 같은 프리픽스가 많이 사용됩니다. 속성에 사용되는 프리픽스는 마이크로소프트, 모질라, 구글, 애플, 오페라 등 개발사들이 배포하는 브라우저에 실험적인 기능이 필요할 때 사용됩니다.

이것을 벤더 프리픽스(Vendor Prefix)라 부르며 번역하면 “공급업체 접두사”라는 뜻으로 풀이됩니다.

과거에는 실험적인 기능이 많아서 프리픽스가 굉장히 많이 사용되어 왔지만 현재는 실험적인 기능 대부분이 표준으로 자리 잡아 준 덕에 프리픽스가 많이 필요하지 않게 되었습니다. 하지만 아직까지 일부는 실험적인 기능을 사용할 때는 프리픽스가 필요합니다.

또한 구형 버전을 사용자들, 특히 인터넷 익스플로러나 구형 스마트폰 브라우저 등 아직도 프리픽스를 완전히 버리지는 못합니다.

프리픽스는 다음 형식으로 속성 앞에 붙어있는 글자가 프리픽스입니다.

/* 인터넷 익스플로러 */
-ms-border-radius: 10px;
/* 크롬 */
-webkit-border-radius: 10px;
/* 파이어폭스 */
-moz-border-radius: 10px;
/* 사파리 */
-webkit-border-radius: 10px;
/* 오페라 */
-o-border-radius: 10px;
/* 최신 브라우저 */
border-radius: 10px;

위 예시에 –webkit-이라는 단어가 많이 보이는데, 이건 애플에서 개발하고 있는 레이아웃 엔진이라는 뜻입니다. 코드가 오픈소스라서 웹킷을 기반으로 만들어진 사파리, 오페라 등 웹브라우저에 구현되어 있기 때문입니다.

현재는 프리픽스 없이도 많은 속성을 사용할 수 있으니 구형 브라우저 사용자를 고려하여 개발하려 한다면 프리픽스를 사용해야 합니다.

프리픽스 순서는 아래 예제와 같습니다.

body {
  /*
    linear-gradient 속성을 지원하지 않는 브라우저
    기본 색상 설정
  */
  background: red;
  /* 크롬과 사파리 4.0 */
  background: -webkit-linear-gradient(red, yellow);
  /* 파이어폭스 3.6 */
  background: -moz-linear-gradient(red, yellow);
  /* 익스플로러 10.0 */
  background: -ms-linear-gradient(red, yellow);
  /* 오페라 10.0 */
  background: -o-linear-gradient(red, yellow);
  /* 최신 브라우저라면 프리픽스를 생략 */
  background: linear-gradient(red, yellow);
}

linear-gradient 속성을 지원하지 않는 사용자를 위해 기본 색상을 정의한 다음에 프리픽스 문법이 나오고 마지막으로 최신 브라우저를 위한 CSS 문법이 나옵니다. 프리픽스 순서는 바뀌어도 괜찮습니다.