벤더 프리픽스(vendor prefix)

마크업하면서 무의식적으로 사용하기만 했던 벤더 프리픽스(vendor prefix)의 개념에 대해 정리하고자 한다.

 

CSS3 표준으로 확정되기 이전이나 브라우저별로 다르게 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 한다. 각 브라우저에서 판별이 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있도록 도와주는게 바로 벤더 프리픽스이다. 

 

-ms-transform:... // Internet Explorer
-moz-transform:... // FireFox
-webkit-transform:... // Chrome & Safari & Android
-o-transform:... // Opera
transform:... // 표준 코드 맨 아래에 위치

transform 속성은 위에 처럼 벤더 프리픽스가 필요하다. 물론 지원하는 브라우저의 버전이 올라가면 벤더 프리픽스를 사용하지 않을 수도 있다. 하지만 구형 브라우저를 지원하는 우리로서는 벤더 프리픽스 사용이 필수이다.

 

브라우저별 벤더 프리픽스

브라우저	벤더 프리픽스
IE/Edge	-ms-
Chrome, Safari, iOS Safari, Android	-webkit-
Firefox	-moz-
Opera	-o-