CSS 벤더프리픽스 예시, 자동 접두사 라이브러리

 

CSS 벤더프리픽스(vendor prefix) 핵심과 예시, 자동으로 접두사를 붙여주는 라이브러리를 정리해보겠습니다.

 

코딩을 하다가 -webkit, -moz와 같은 글자를 보신 적 있으신가요?

 

이러한 접두어들은 웹브라우저에 따라 적용되지 않는 CSS 신기능이 있을 때 대체할 스타일을 명시하는데 사용됩니다.

 

상당히 귀찮은 작업이지만, 모든 브라우저에서 원하는 모습대로 웹사이트를 구동하려면 꼭 해야하는 작업입니다.

 

이 글에서는 벤더프리픽스에 대해 간략하게 알아보고, 예시와 자동 접두사 라이브러리도 공유해보겠습니다.

1. 벤더프리픽스란?

 

벤더프리픽스는 주요한 웹브라우저가 새로운 기능을 제공할 때, 새로운 기능을 제공하지 못하는 이전 버전의 웹브라우저에게 이 사실을 알리고 스타일을 사용할 수 있게 해주는 역할을 합니다.

 

여기서 새로운 기능이란, CSS 권고안에 포함되지 못했거나 포함되었어도 정비되지 않은 기능을 말합니다. 

 

• -ms- : IE. 일명 인터넷 익스플로러인데 지난 6월에 서비스가 종료되었으니 더이상 쓰지 않아도 됩니다.
• -webkit- : 크롬, 사파리에 해당됩니다.
• -moz- : 모질라 브라우저입니다.
• -o- : 오페라 브라우저입니다.

 

그럼 구체적으로 어떻게 사용하면 되는지 예시를 확인해볼까요?

2. 벤더프리픽스의 예시

CSS3에서 추가된 리니어 그라디언트를 제공하지 않는 브라우저가 있다고 가정해봅시다.

 

그런 브라우저를 포함해서 다음과 같이 벤더프리픽스를 활용할 수 있습니다.

div{
	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);
}

맨 윗줄의 background 속성은 linear-gradient 속성을 지원하지 않는 모든 브라우저에서 단색으로 채우게 합니다.

중간 부분에서는 벤더프리픽스에 따라 브라우저별로 스타일을 줄 수 있습니다. 

맨 마지막줄의 background 속성은 CSS 표준 문법 코드이므로, 정식으로 지원하는 브라우저에서 실행될 것 입니다.

 

주의할 점은 CSS 표준 문법 코드를 맨 마지막에 적어야만 이전의 벤더프리픽스 내용이 적용된다는 것 입니다.

3. 접두사를 자동으로 붙여주는 라이브러리

 

 

prefixfree.js를 이용하면 자동으로 브라우저 접두사를 붙일 수 있습니다. 이런 라이브러리는 찾아보시면 많을 것 입니다.

 

js파일을 다운받고 head태그 안에 다음과 같이 연결해주기만 하면 자동으로 접두사가 적용된다고 합니다.

 

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

 

여기까지 CSS 벤더프리픽스 예시와 자동 접두사 js 라이브러리까지 정리해보았습니다. 읽어주셔서 감사합니다.