접두어 - by. UXKM

  • Publishing
  • CSS
  • CSS 중급
  • 접두어
요약 설명

벤더 프리픽스(vendor prefix)는 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)입니다.
CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 합니다.
아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.
권고 후보 단계에 이르면 벤더 프리픽스는 삭제할 것을 권장하고 있습니다.

참고: 현재 대부분의 CSS 속성은 표준화되어 최신 브라우저에서는 벤더 프리픽스가 필요하지 않습니다. 벤더 프리픽스는 주로 구형 브라우저 지원이 필요한 경우에만 사용하며, 최신 프로젝트에서는 표준 속성만 사용하는 것을 권장합니다.

W3C에서 책정되는 사양은 아래와 같은 단계를 거쳐 결정됩니다.
Editor's Draft(편집자 초안) → Working Draft[WD] (초안) → Last Call Working Draft[LC] (최종 초안) → Candidate Recommendation[CR] (권고 후보) → Proposed Recommendation[PR] (권고안) → Recommendation[REC] (권고)

벤더 프리픽스(vendor prefix)

크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용합니다.

  1. 사용 방법

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

    접두어 버전을 사용하는 브라우저는 그것을 이용할 것이고, 이해하지 못하는 브라우저는 그 속성을 무시합니다. 표준을 지원하는 브라우저는 맨 마지막에 있는 속성을 실행합니다.

  2. 사용 예제

    위의 예제에서 가장 먼저 나오는 background 속성은 gradient 속성을 지원하지 않는 모든 브라우저를 위한 것입니다.

    맨 마지막에 나오는 background 속성은 CSS 표준 문법으로 작성된 코드입니다.

    CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있습니다.

    이러한 벤더 프리픽스는 실험적인 해당 기능들이 CSS 표준 권고안에 포함되거나 완벽하게 제정된 상태가 되면 더는 사용할 필요가 없어집니다.