vendor prefix

css3의 기능은 웹표준이 아니였다. 때문에 어떠한 속성을 주었을 때에, 브라우저마다 원하는 화면을 출력하는데 제한적이다. 벤더 프리픽스는 새로운 기능을 모두 제공해야 할 때
변환 효과를 적용하는 스타일 시트 라고 이해하는게 빠를 수 있다.

이전 버전의 웹 브라우저에 포함되어있지 않은 기능을 사용하게 할 때 그 사실을 알려주기 위해 사용하는 접두사(prefix)이다.

즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용한다.

그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 된다.

하지만 매번 스타일을 정의 할 때마다 벤더 프리픽스를 설정하면 코드가 너무 길어진다.

일일이 prefix를 주기에는 신경쓸 속성이 너무 많고,
무분별한 사용은 브라우저의 성능에도 영향을 주기 때문에,
오픈소스 라이브러리인 Prefix Free 라이브러리를 사용하는것도 하나의 방법이다.

프리픽스를 지원하는 -prefix-free 플러그인을 연결해주기만 하면 ie9+, opera 10+, firefox3.5+, safari 4+, chrome, mobile safari, android browser 등 이상의 버전에서 지원이 가능하다.

prefixfree란 css에서 브라우저마다 적용시켜줄때 css앞에 써주던

-wiz- , -webkit- , -ms-등의 접두사에서 해방시켜줄때 사용한다 반복된 코드를 줄일수있고 css적용의 번거로움이 줄어드는거같다.

그리고 이것을 더 쉽고 편하게 작업해주는 prefixfree.min.js 라는 자바 스크립트 파일도 함께 넣어준다
이 파일을 이용하면 브라우저별 접두사를 쓸 필요가 없게 된다

-prefix-free 적용 방법
https://projects.verou.me/prefixfree/ 방문 후 왼쪽 버튼을 눌러 소스 코드를 복사 후 js 파일로 저장한다.

html head태그 안에 다음과 같이 넣어준다.

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