11. Vendor Prefix 벤더 프리픽스

https://poiemaweb.com/css3-vendor-prefix

CSS3 Vendor Prefix | PoiemaWeb

 

 

주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때

이전 버전의 웹 브라우저에 알려주기 위해 사용하는 접두사(prefix)

 

 

* {

  -webkit-user-select: none;  /* Chrome all / Safari all */

  -moz-user-select: none;     /* Firefox all */

  -ms-user-select: none;      /* IE 10+ */

  user-select: none;          /* Likely future */

}

 

 

 

많은 브라우저를 위한 벤더 프리픽스를 사용하는 것은 코드의 양을 늘게 한다.

브라우저는 거의 매달 업데이트가 이루어지고 있어 불필요한 벤더 프리픽스를 사용할 가능성이 크다.

 

---

 

Prefix Free 라이브러리 를 사용하는 것은 매우 유용한 방법이다.

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

 

Prefix Free 사이트에서 라이브러리를 다운로드하고 include 하기만 하면 이 후에는 벤더 프리픽스없이 모든 CSS를 사용할 수 있다.

 

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

Prefix free: Break free from CSS vendor prefix hell!

 

 

---

 

브라우저별로 해당 기능을 사용할 수 있는지 확인하는 방법

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

---

벤더 프리픽스란?

 

브라우저의 새로운 기능을 이전 버전의 브라우저에게 알리고 이를 사용할 수 있게 도움