접두어 - by. UXKM

요약 설명

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

W3C 사이트를 참조할 때는 어느 단계의 사양인지를 확인할 필요가 있습니다.
권고 전 사양을 웹 브라우저가 도입하는 경우도 있으며, 웹 브라우저의 기능을 참고하여 사양이 정해지는 경우도 있습니다.
W3C의 사양이 결정될 때까지
W3C에서 책정되는 사양은 아래와 같은 단계를 거쳐 결정됩니다.

Editor's Draft(편집자 초안)
Working Draft[WD] (초안)
Last Call Working Draftg[LC] (최종 초안)
Candidate Recommendation[CR] (권고 후보)
Proposed Recommendation[PR] (권고안)
Recommendation[RED] (권고)

권고 전 CSS3의 사양을 웹 브라우저 제조업체가 지원하는 경우는 셀렉터 앞에 웹 브라우저별로 서로 다른 접두사(프리픽스, Prefix)를 붙일 것을 권장하고 있습니다.
이를 '벤더 프리픽스'라고 합니다.
권고 후보 단계에 이르면 벤더 프리픽스는 삭제할 것을 권장하고 있습니다.

벤더 프리픽스(vendor prefix)

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

  1. 사용 방법

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

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

  2. 사용 예제

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

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

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

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