CSS 벤더프리픽스 -webkit, -o

벤더프리픽스 (Vendor Prefix)

CSS 최신의 기능을 사용할 때 이전버전의 브라우저에서는 지원하지 않을 때가 있다.

CSS 권고안에 포함되지 못하거나, 완벽히 제정되지않은 기능들이 그렇다.

이런경우 이전버전의 브라우저에게 이 사실을 알려주어 기능을 사용할 수 있는데,

그때 쓰는것이 벤더프리픽스(Vendor Prefix)다.

 

벤더프리픽스를 사용하면 해당 기능이 포함되어 있지 않은 구버전의 웹 브라우저에서도 사용이 가능해진다.

브라우저별 벤더프리픽스는 아래와 같다.

브라우저	벤더 프리픽스
IE or Edge	-ms-
Chrome	-webkit-
FireFox	-moz-
Safari	-webkit-
Opera	-o-
iOS Safari	-webkit-
Android Browser	-webkit-
Chrome for Android	-webkit-

 

실제로 css코드로 작성하자면 아래와 같다.

    .button {
        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 표준 문법 코드 -->
    }

주의할 점은 표준문법코드를 항상 마지막에 두어야, 벤더프리픽스가 포함된 코드가 정상작동된다.

CSS 표준 권고안에 포함되는 순간부터는 벤더프리픽스를 사용하지않아도 된다.

---

벤더프리픽스 자동적용

코드를 하나하나 다 적기에는 번거로운 작업이다.

벤더 프리픽스를 사용하지않아도, 자동으로 적용되게해주는 모듈이 있다.

아래에서 js파일을 받아 html에 적용시켜주면 된다.

https://projects.verou.me/prefixfree/

Prefix free: Break free from CSS vendor prefix hell!