[CSS][스크랩] 벤더 프리픽스

원본 url : http://www.homzzang.com/b/css3-3

벤더 프리픽스(vendor prefix) 개념

W3C(World Wide Web Consortium)에서 CSS 표준안을 확정하기도 전에 기초 단계의 안건 문서를 바탕으로 각 브라우저사들이 기술력 과시 및 브라우저 시장 선도를 위해 자체적으로 만들어 해당 속성에 대해 각 브라우저를 상징하는 접두어를 붙여 해당 CSS3 속성을 임시로 테스트 함.  

border-radius 속성처럼 CSS3 표준안으로 이미 확정된 속성은 더 이상 접두어를 안 붙여도 작동하게 되지만, 그렇지 않은 속성 경우엔 해당 브라우저의 접두어를 붙여야 하며, 접두어가 붙은 브라우저에서만 해당 속성이 작동.

각 브라우저사를 상징하는 접두어

-webkit- : 사파리 (safari) , 크롬 (chrome) , 안드로이드 , 아이폰

-ms- : 익스플로러 (ie) ※ IE9 경우 2D 효과만 지원

-moz- : 파이어폭스 (firefox)

-o- : 오페라 (opera)

     : 표준안으로 확정된 경우엔 접두어가 안 붙음. 표준안을 CSS 마지막에 적어주는 게 렌더링에 좋음.

사용 예제

-webkit-border-radius:

    -ms-border-radius:

   -moz-border-radius:

      -o-border-radius:

          border-radius: