[Vender Prefix] 벤더프리픽스

벤더 프리픽스(Vender Prefix)...

html3 /css3 로 넘어가는 과정에서 몇 몇 css3의 기능들이 웹 표준이 아니기 때문에 다른 브라우저에서 제대로 표현 되지 않을때가 있었다.

그럴때 사용하는 방법이 벤더 프리픽스이다.

대표적인 예로 

transition / transform  / border-radius / text-shadow / box-shadow / background:linear-gradient~~등이 있다.

위와 같은 css3의 속성들은 표준으로 확정 되지 않아서 지원 되지 않는 브라우저가 있어서 제대로 먹히질 않는다.

사용법은 초 간단하다..

Perfix는 "접두어"라는 뜻이다..

즉 앞에 

-webkit- / -moz- / -o-​ / -ms- 를 붙여주기만 하면 된다.

-webkit-border-radius:10px;	크롬/사파리
-moz-​border-radius:10px;	파이어폭스
-o-​border-radius:10px;	오페라
-ms-border-radius:10px;	인터넷 익스플로러
border-radius:10px;	css3 표준 속성

※ 표준 속성을 가장 마지막에 써야한다.

P.S : border-radius는 이제 그냥 사용해도 되는것 같다...IE도 IE9까지는 표준 속성만 사용해도 제대로 보여진다.

transition도 IE11 부터는 그냥 되는것 같다.

이외의 속성은 USE I CAN 사이트를 이용해 확인 할 것.