1. CSS3 Browser Vendor Prefix (브라우저 벤더 프리픽스) ?
다양한 브라우저들이 있는데 전세계적으로 많이 사용되는 대표적인 웹 브라우저에는 크롬, 파이어폭스, 사파리, 오페라, 익스플로어 등이 있다.
벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.
즉, 이 말은 아직 CSS 권고안에 포함되지 못한 기능이거나 CSS권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 이 벤더 프리픽스를 사용하게 된다.
div {
width: 300px;
height: 100px;
background-color: aquamarine;
border: 1px solid #222;
/* 보통은 위와 같이 작성이 되지만
-moz-, -o-, -ms-, -webkit- 등이 앞에 붙어 있는 것들이 있는데 이게 바로 vendor prefix */
-webkit-box-sizing: inherit;
}
| Vendor Prefix | Browser |
| -webkit- | Chrome, Safari, newer vesions of Opera and Edge , almost all iOS including Firefox for iOS; 기본적으로 모든 Webikit 및 Chromium 기반 브라우저 |
| -moz- | Firefox |
| -o- | old pre-Webkit versions of Opera |
| -ms- | Chromium 전의 Internet Explorer, Microsoft Edge |
※ Chromium(크로미움) : Chromium 프로젝트는 웹 브라우저는 Chrome을 개발하는 오픈소스 프로젝트로, 웹 표준 준수/ 웹브라우저 보안 강화 및 성능 개선을 목표로 하고 있다.
2. vendor prefix 사용하지 않고 js파일 링크 걸기
이 vendor prefix를 매번 적는 것은 어렵기 때문에 아래 사이트에서 제공하는 자바 스크립트 파일 링크를 통해 해결할 수 있다. 사이트에서도
'-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.'라고 소개하고 있는데 제목부터 'CSS prefix 지옥으로 부터 탈출해라!'라고 적혀있다.
사용법은 그냥 [Only 2KB gzipped] 라고 적힌 홈페이지 왼쪽 상단에 있는 동그라미를 클릭하여
<script src="/prefixfree.min.js"></script>라고 넣어주는 것이다.
참고자료
https://www.tcpschool.com/css/css3_module_vendorPrefix
https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
https://developer.mozilla.org/ko/docs/Glossary/Vendor_Prefix
