[CSS] Vendor Prefix (브라우저 업체별 접두사)

 

 placeholder 

<input type="text" class="input--text" placeholder="Search GitHub"> 

 

# placeholder 색상 변경

- input 요소에 제공되는 일종의 Hint

- 텍스트를 작성하면 사라지고 다시 text를 지우면 나타난다.

- 글씨 색과 잘 구별이 안 가기도 합니다.

 

/* Vendor Prefix (브라우저 업체별 접두사) */
/* 크롬 - 마이크로소프트 - 모질라 */
.input--text::-webkit-input-placeholder{ color: #cacaca;}
.input--text::-ms-input-palceholder{color:#cacaca;}
.input--text::-moz-input-placeholder{color:#cacaca;}

 

# 가상 요소 선택자 (::)

.input--text::input-placeholder{ color: #cacaca;}  -- 동작하지 않는다. (표준기술 ❌)

 

- 특정한 브라우저에서 동작할 수 있도록 만들 수 있다.

- 브라우저 업체별 접두사를 사용하게 되면 동작이 된다.

#  Vendor Prefix (브라우저 업체별 접두사)

- 다양한 웹 브라우저에서 표준이 아닌 브라우저 내에서 실험적으로 사용할 만한 기능들을 제공한다.

- 업체별 접두사가 없이 제공하면 마치 표준처럼 해석될 수가 있다.

- 현재 브라우저에서 실험적으로 제공되고 있는 기능이라는 것을 안내하기 위해서 붙는 접두사

크롬 브라우저 -webkit-  (웹킷 브라우저)
마이크로 소프트 -ms-   (IE / Edge 브라우저)
모질라 -moz-    (파이어폭스 브라우저)
+ 오페라 브라우저(-o)의 경우 input-placeholder 기능 제공하지 않는다.

 

placeholder 글자색 변경 전 후 

 

✔ 업체별 브라우저 접두사를 붙이면❔ 실험적인 기능을 해당 브라우저에서 쓸 수 있다.