[CSS] PREFIX - 접두사

 

접두사 : 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사를 붙여 브라우저별로 구분

 

CSS3 브라우저 접두사

접두사	설명
-webkit-	웹키트 방식 브라우저(사파리, 크롬 등)
-moz-	게코 방식 브라우저(모질라, 파이어폭스)
-o-	오페라 브라우저
-ms-	마이크로소프트 인터넷 익스클로어

.box:hover {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

 

똑같은 기능을 각 브라우저별로 사용하기 위해 위와 같이 5줄의 소스가 작성을 해야 함

-> 이를 줄이고자 '-prefix-free'라는 자바스크립트 파일을 이용

다운로드 링크 : http://leaverou.github.io/prefixfree/ 

Prefix free: Break free from CSS vendor prefix hell!

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

.box:hover {
    transform: rotate(15deg);
}