벤더 프리픽스(Vendor Prefix)
주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.
즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.
그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다.
<style>.transition {
-webkit-transform:translate(100px,200px); /*크롬, 사파리*/
-moz-transform:translate(100px,200px); /*파이어폭스*/
-ms-transform:translate(100px,200px); /*익스플로러, 엣지*/
-o-transform:translate(100px,200px); /*오페라*/
}</style>하지만 단 4줄로도 이렇게 지저분해지는데 더 큰 파일에선 어떻게 해야할까요?
👉-prefix-free
위의 링크를 타고 가서 상단 왼쪽에 Only 2KB gzipped 라는 빨간색 버튼이 보이실겁니다. 해당 버튼을 누르면 script가 나오는데 복사해서 폴더내에 prefixfree.min.js 파일을 만들어줍니다.
그 다음 html 파일의 <head>섹션에 script를 추가해줍니다.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./js/prefixfree.min.js"></script>
<link rel="stylesheet" href="./style/test.css">실행시켜 보시면 <html>에 전에 없었던 class=" -webkit이 추가된걸 확인하실 수 있습니다.
각성개발자