[CSS] 벤더 프리픽스 알아보기 (Vender Prefix)

이전 크로스 브라우징 포스트에서 Vender Prefix에 대한 이야기가
나왔습니다
오늘은 이에 대해 더 자세히 알아보도록 하겠습니다

 

CSS들을 사용할 때 최신 브라우저에서는 대부분의 CSS를 지원하고 있지만 오래된 브라우저에서는 지원하지 않는 경우도 있습니다

벤더 프리픽스 (Vender Prefix)

prefix는 접두사라는 의미

아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른방식으로 지원되므로 접두사를 붙여 브라우저별로 구분

 

css 미지원 브라우저	기본 속성
초기 모던 브라우저	prefix 붙여서 속성 작성
최신 모던 브라우저	접두사 없이 속성 작성

 

 접두사 종류

접두사	호환 브라우저
-webkit-	사파리, 크롬
-moz-	모질라, 파이어 폭스
-o-	오페라
-ms-	인터넷 익스플로저

 

TIP!
top-down의 방식의 영향을 받기 때문에 위와 같은 순으로 작성하기!

 

Vender prefix 사용 예시

/* CSS3 미지원 브라우저 */
background: blue;

/* 초기 모던 브라우저 = 접두사(prefix)필요 */
background: -webkit-linear-gradient(left bottom, blue,white);
background: -moz-linear-gradient(left bottom, blue,white);
background: -o-linear-gradient(left bottom, blue,white);
background: -ms-linear-gradient(left bottom, blue,white);

/* 최신 모던 브라우저 = 접두사(prefix)필요 없음 */
background: linear-gradient(left bottom, blue,white);

 

TIP!
가장 마지막에 표준 속성을 넣어주는 것을 원칙으로 함

 

---

 

스크립트로 적용하기

스크립트 파일을 적용하는 것으로 벤더 프리픽스를 일일이 작성하지 않아도 되게 해주는 것

http://projects.verou.me/prefixfree/

Prefix free: Break free from CSS vendor prefix hell!

 

파일을 다운받아 head 태그 안에 스크립트 파일 연결

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

 

---

 

관련 포스트

크로스 브라우징 알아보기 (Cross Browsing)

[HTML/CSS] 크로스 브라우징 알아보기 (Cross Browsing)

 

---

 

참조 자료

https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix