벤더 프리픽스

 

벤더 프리픽스란?

벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다.

IE 크롬 파이어폭스 사파리 오페라

-ms-

-webkit-

-moz-

-webkit-

-o-

크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용합니다.

 

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

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가 어느 브라우저까지 지원하는지 확인할 수 있는 사이트다.

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