[CSS] 접두사 (CSS Prefix)

HTML/CSS 작성하다 모르는게 생길 때 검색하면 한번씩 보이게 되는 -webkit- 등 본 적이 있었다.

처음엔 그냥 지나치다가 한번은 프로젝트 진행도중 Text에 그라데이션을 많이 넣어야 했던 일이 생겨서 어떻게 해야하나 찾아봤던 것을 공유목적으로 정리해서 올린다.

 

 

---

 

-webkit- : 웹키트 방식 브라우저용 (구글크롬, 사파리와 새 버전의 오페라도 포함 등)
-moz- : 개코 방식 브라우저용 (모질라, 파이어폭스 등)
-ms- : 마이크로소프트 인터넷 익스플로러에 적용 (보통 생략)
-o- : 오페라 브라우저

 

 

---

 

요즘은 CSS 표준화가 점점 잘 이루어지고 있어서 예외 상황인 특정 상황이나 구형 브라우저와의 호환성을 보장하는 것이 아니라면 접두어의 필요성이 점점 줄어들고 있다.

※주의사항으로 항상 접두사가 없는 버전의 속성도 포함 하자

/* 예시 */
background: red; <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow); <!-- 모질라, 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow); <!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow); <!-- 오페라 10.0 이상을 위한 코드 -->
background: linear-gradient(red, yellow); <!-- CSS 표준 문법 코드 -->

 

 

일일이 접두사를 붙이기 힘들다면 유능한 개발 선배님께서 한 줄로 깔끔히 만들어 주는 Autoprefixer 와 같은 도구를 이용해 보자!

다운로드 사이트로 이동