[HTML5&CSS3] 벤더 프리픽스(vendor prefix)

특정 CSS속성이 표준으로 제정되기 이전에 실험적인 기능들이 각 브라우저별로 인식하게 하기 위한 접두사입니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}
#div2
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
   background-color:yellow;
}
</style>

위 예제의 경우 transform CSS를 사용하기 위해 각 브라우저별로 벤더프리픽스 접수사를 사용한 것을 확인할 수 있습니다.

 

여기서 -ms-는 익스플로러 -webket-은 크롬, 사파리와 대응되며 -moz-는 파이어폭스, -o-는 오페라인데 현재는 -webket-으로 변경되으니 참고 바랍니다.