CSS 공부 ( 브라우저 접두사 [prefix] )

1. CSS 접두어

- CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 한다. 

 *벤더 프리픽스(Vendor Prefix) : 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix).

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

-  권고 전 CSS3의 사양을 웹 브라우저 제조업체가 지원하는 경우 셀렉터 앞에 웹 브라우저 별로 서로 다른 접두사를 붙일 것을 권장

 

주요 웹 브라우저의 벤더 프리픽스
인터넷 익스플로러	엣지	크롬	파이어폭스	오페라	사파리
-ms-	-ms-	-webkit-	-moz-	-o-	-webkit-

2. 사용법

- 브라우저 접두어를 앞쪽에 쓰고, 맨 마지막에 표준 속성(비 접두어 버전)을 선언합니다.

- 접두어 버전을 사용하는 브라우저는 그것을 이용하고 이해하지 못하는 브라우저는 속성을 무시

- 표준을 지원하는 브라우저는 마지막 속성을 실행

 

예제 1)

div {
  background: red;                                  /* gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 */
  background: -webkit-linear-gradient(red, yellow); /* 크롬과 사파리 4.0 이상을 위한 코드 */
  background: -moz-linear-gradient(red, yellow);    /* 파이어폭스 3.6 이상을 위한 코드 */
  background: -ms-linear-gradient(red, yellow);     /* 익스플로러 10.0 이상을 위한 코드 */
  background: -o-linear-gradient(red, yellow);      /* 오페라 10.0 이상을 위한 코드 */
  background: linear-gradient(red, yellow);         /* CSS 표준 문법 코드 */
}

예제 2)

.div {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 

참조: https://uxkm.io/publishing/css/03-cssMiddleclass/04-css_vendor#gsc.tab=0

접두어 | UXKM