[css] 벤더 프리픽스(vendor prefix)

[vendor prefix?]

 

벤더 프리픽스(vendor prefix)란?

css3의 기능은 웹표준이 아니였다. 때문에 어떠한 속성을 주었을 때에, 브라우저마다

원하는 화면을 출력하는데 제한적이다. 벤더 프리픽스는 새로운 기능을 모두 제공해야 할 때

변환 효과를 적용하는 스타일 시트 라고 이해하는게 빠를 수 있다.

 

하지만 현대에 와서는 브라우저의 버전에 올라가면서, 많은 스타일시트의 속성들이

표준으로 정의되면서 vendor prefix를 사용하지 않아도 되지만,

구형 브라우저(하위 브라우저)를 맞춰주기 위해 아직까지도 vendor prefix가 사용된다.

 

[브라우저별 벤더 프리픽스 사용법]

Browser	Vendor Prefix
IE or Edge	-ms-
Chrome	-webkit-
Firefox	-moz-
Safari	-webkit-
Opera	-o-
iOS Safari	-webkit-
Android Browser	-webkit-
Chrome for Android	-webkit-

일일이 prefix를 주기에는 신경쓸 속성이 너무 많다.

무분별한 사용은 브라우저의 성능에도 영향을 주기 때문에, 오픈소스 라이브러리인

Prefix Free 라이브러리를 사용하는것도 하나의 방법이다.

<script src="prefixfree.min.js"></script>

http://leaverou.github.io/prefixfree/ - prefix Free 사이트에서 라이브러리를 다운로드 하고,

html에 include 하지만 하면 벤더프리픽스 없이 모든 css를 사용할 수 있다.

 

https://caniuse.com/- 내가사용할 css가 어느 브라우저까지 지원하는지 확인할 수 있는 사이트다.

자신이 사용할 속성값을 쓰면, 어디까지 지원을 해 주는지 알 수 있다.

 

예를들어 border-radius:10px; 을 사용하려고 하면,

 

.className{
	
    -webkit-border-radius: 10px; /* safari, chrome */	
    -moz-border-radius:10px; /* firefox */
    -o-border-radius:10px; /* opera */
    -ms-border-radius:10px; /* IE */
    border-radius:10px; /* default css */
    
}

위와같이 사용하면 된다.

브라우저마자 자신이 사용할 수 있는 속성을 사용하고, 없을때 마지막에 default인 border-radius를 사용한다.