TIL 220713 CSS에서 벤더 프리픽스(vendor prefix)를 붙이는 이유

CSS2까지는 모든 기능에 대한 내용을 하나의 문서에 정의하였지만 CSS3부터는 기능에 따라 모듈로 분리하여 정의하고 있다.

CSS3의 모듈은 많은 것들이 아직 작성 중이다. 그래서 아직 표준 권고안이 되지 못한 속성들은 브라우저 마다 다른 방식으로 지원된다.

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

 

속성 이름 앞에 벤더 프리픽스(vendor prefix)를 붙여 브라우저별로 구분한다. 표준 규약이 완성된 속성도 옛날 버전의 브라우저 사용자를 고려하기 위해 벤더 프리픽스를 사용하기도 한다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 된다. 

 

Vendor Prefix

-webkit	웹키트 방식 브라우저 (사파리, 크롬 등)
-moz-	게코 방식 브라우저 (모질라, 파이어폭스 등)
-o-	오페라 브라우저
-ms-	마이크로소프트 인터넷 익스플로러

 

CSS 표준 문법 코드는 벤더 프리픽스로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있다.

.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 표준 문법 코드 */
}

 

 

Vendor Prefix Plugin

-prefix-free

힘들게 작성하지 않아도 되는 벤더 프리픽스를 자동으로 붙여주는 플러그인이다.

 

https://projects.verou.me/prefixfree/

Prefix free: Break free from CSS vendor prefix hell!

https://github.com/LeaVerou/prefixfree

GitHub - LeaVerou/prefixfree: Break free from CSS prefix hell!