[CSS] 벤더 프리픽스(Vendor Prefix)

대표적으로 많이 사용되는 웹 브라우저에는 크롬, 파이어폭스, 사파리, 오페라, 인터넷 익스플로러 등이 있다.

이러한 웹 브라우저에서 아직 표준 규약이 아닌 속성들

그러니까 간단히 말해 아직 CSS 권고안에 포함되지 못한 기능이거나, CSS 권고안에 포함되어 있지만 아직 완벽하게 표준이 되지 못한 상태의 속성들을 사용하고자 할 때 벤더 프리픽스(Vendor Prefix)를 사용한다.

아직 완벽한 표준이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원하기 때문에 속성 앞에 접두사(prefix)를 붙여 브라우저별로 구분해서 적용시켜 주어야 한다.

만약에 표준 규약이 아니었던 속성들이 표준 규약이 되었다 하더라도 이전 버전을 사용하고 있는 사용자들을 고려해서 계속 브라우저별 접두사를 붙여 사용하기도 한다.

대표적으로 많이 사용되는 웹 브라우저의 벤더 프리픽스(Vendor Prefix)

크롬, 사파리 : -webkit-

파이어폭스 : -moz-

오페라 : -o-

인터넷 익스플로러 : -ms-

사용법은 아래와 같다.

<style>

.button {

background: red;

background: -webkit-linear-gradient(red, yellow);

background: -moz-linear-gradient(red, yellow);

background: -ms-linear-gradient(red, yellow);

background: -o-linear-gradient(red, yellow);

background: linear-gradient(red, yellow);

}

</style>

prefix를 붙여 사용할 때에는 표준으로 결정된 후 사용할 속성을 맨 마지막에 작성한다.

이렇게 작성하면 나중에 속성이 표준으로 결정된 후 앞에 썼던 브라우저별 prefix 들만 지우면 된다.

만약 이렇게 일일이 브라우저별로 작성하기 번거롭다면 -prefix-free 라는 자바스크립트 파일을 사용하여 매번 브라우저 접두사를 붙이지 않고도 동일한 효과를 낼 수 있다.

https://github.com/LeaVerou/prefixfree

다운로드해서 prefixfree.min.js 파일 사용하기