[css] 브라우저 업체별 접두어(vendor prefix)

 

 

[css] 브라우저 업체별 접두어(vendor prefix)

 

 

css를 공부하다 보면 한 번쯤 보았을 브라우저 접두어

 

가령 이런 것들.

 

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;

 

브라우저 제조사별 접두어는 (vendor prefix 또는 browser prefix)

 

아직 css 표준으로 인정되진 않았지만, 과도기적 단계에서 사용하는 것으로

 

브라우저 제작사마다 다른 접두어를 사용합니다.
 

 

 

css 브라우저 접두어 예:

 

-webkit- /*Safari, Chrome, Android, iOs, Webkit 엔진을 이용하는 브라우저*/

-moz- /*Firefox, 모질라 브라우저 엔진을 사용하는 브라우저*/

-ms- /*Internet Explorer(항상은 아님)*/

-o-  /*Opera*/

 

 

 

 

브라우저 접두어를 사용하는 이유는?

 

css에 새로운 속성을 추가하기 전에, 일종의 테스트와 실험 기간으로

임시적으로 접두어를 사용하는 것.

 

표준으로 만들어지기 전에 일어날 문제들을 사전에 막기 위한 것.

 

 

사용 방법:

브라우저 접두어를 앞쪽에 쓰고, 맨 마지막에 표준 속성(비 접두어 버전)을 씀

접두어 버전을 사용하는 브라우저는 그것을 이용할 것이고.

이해하지 못하는 브라우저는 그 속성을 무시합니다.

표준을 지원하는 브라우저는 맨 마지막에 있는 속성을 실행합니다.

 

 

 

사용 예:

 

 

div{

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

}

 

 

 

브라우저별 접두어를 반복해서 쓰는 것이 번거롭고 성가시지만,

 

브라우저가 개선되면 필요 없는 접두어 버전을 지우면 됩니다.

하지만 브라우저를 업데이트하지 않는 사용자를 위해

 

기존의 접두어 코드를 남겨두는 것도 괜찮습니다.

 

예를 들어 둥근 모서리를 만들기 위해 이렇게 해야 했지만

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

 

현재는 표준 버전 하나만 필요 함.

border-radius: 10px 5px;

 

 

밑에 사이트도 참조하시면 도움되실 거예요~

 

 

 

 

http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

 

http://peter.sh/experiments/vendor-prefixed-css-property-overview/

 

http://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html