CSS : 벤더 프리픽스(Vendor Prefix)

들어가기 전

CSS를 작성할 때 사진과 같은 -webkit과 -moz가 붙는 기능을 볼 수 있다.

이 기능들이 무엇을 의미하는지 알아보도록 하자!🥰

벤더 프리픽스(Vendor Prefix)

📌 참고자료
MDN Vendor
TCPSCHOOL 벤더 프리픽스
poiemaweb 벤더 프리픽스

벤더 프리픽스란 주요 웹 브라우저(Chrome, Firefox, IE, Opera, Safari...) 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.

아직 CSS 권고안에 포함이 되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용한다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있다.

즉, 구형 브라우저를 지원하기 위해 벤더 프릭스를 사용한다.
▶ 브라우저가 업데이트되어 버전이 올라가면 사용하지 않아도 된다.

🧩 웹 브라우저의 벤더 프리픽스

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

프리픽스 프리(Prefix Free)

📌 참고자료
prefixfree

많은 브라우저를 위해 벤더 프리픽스를 사용하는 것은 코드의 양을 늘게 하고 거의 매달 업데이트가 이루어지고 있어 불필요한 벤더 프리픽스를 사용할 가능성이 크다.

사용하지 않아도 되는 벤더 프리픽스를 사용하는 것은 성능에 영향을 주기 때문에 Prefix free라이브러리를 사용하는 것이 매우 유용하다.

🧩 사용 방법
prefix free 사이트에서 라이브러리를 다운받고 include해주면 벤더 프리픽스 없이 모든 CSS를 사용할 수 있다.

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

---

🗓️ 수정 및 추가

✅ 2022.02.26

• 오타 수정