CSS Vendor Prefix Generator
Input your CSS properties below to automatically add vendor prefixes. This tool helps ensure cross-browser compatibility for modern CSS features.
CSS Properties
Enter one CSS property per line or separate with semicolons
WebKit
(Safari, Chrome)
Mozilla
(Firefox)
Microsoft
(IE, Edge)
Opera
• Modern browsers may not need all prefixes, but they ensure compatibility with older versions
• Consider using a build tool like Autoprefixer for production code
• Some properties like 'display: flex' need prefixing for older browsers but not for newer ones
CSS 벤더 접두사 생성기 사용 방법
- 1
CSS 붙여넣기
flex나 transition 선언 같은 CSS 규칙을 코드 입력란에 넣으세요.
- 2
접두사 선택
지원해야 할 브라우저에 따라 -webkit-, -moz-, -ms-, -o- 등 추가할 벤더 접두사를 선택하세요.
- 3
접두사가 붙은 CSS 생성
Generate Prefixes를 클릭해 일치하는 접두사 속성이 추가된 코드 버전을 생성하세요.
- 4
결과 복사
출력에서 접두사가 붙은 CSS를 복사해 스타일시트에 다시 붙여넣으세요.
CSS 벤더 접두사 완전 정리
벤더 접두사란 정확히 무엇인가
벤더 접두사는 어떤 기능이 확정되기 전에 출시하기 위해 브라우저 제작사가 속성이나 값 이름 앞에 붙여 둔 짧은 문자열입니다. 마주치게 될 네 가지는 Chrome, Safari, 최신 Edge의 엔진을 위한 -webkit-, Firefox를 위한 -moz-, 구버전 Internet Explorer와 초기 Edge를 위한 -ms-, 그리고 구버전 Presto 기반 Opera를 위한 -o-입니다. 그래서 전환기 동안에는 transition-property와 -webkit-transition-property를 둘 다 적었을 수 있습니다. 접두사가 붙은 쪽은 그 기능을 일찍 출시한 브라우저를 위한 것이고, 맨 속성은 최종 표준을 따르는 브라우저를 위한 것입니다.
원리상 브라우저는 인식하지 못하는 속성을 무시하는데, 바로 이것이 접두사를 겹쳐 쌓아도 안전한 이유입니다. 접두사가 붙은 변형들을 먼저 나열하고 표준 속성을 마지막에 두면, 각 엔진은 자신이 이해하는 줄만 가져가고 나머지는 건너뜁니다.
애초에 접두사가 존재했던 이유
접두사는 어려운 문제에 대한 실용적인 답이었습니다. 그라데이션, 변형, 플렉스박스 같은 새 기능이 아직 설계 중일 때, 브라우저 벤더는 명세가 바뀔 수도 있는 문법을 못 박지 않으면서 개발자가 실험할 수 있게 하고 싶었습니다. 기능을 접두사 뒤에 숨겨 출시하는 것은 '이건 실험적이며 바뀔 수 있다'고 말하는 한 방법이었습니다. 최종 표준이 달라지면, 접두사 없는 속성은 바로잡힌 동작을 받아들이고 접두사가 붙은 쪽은 옛 동작을 보존할 수 있어서, 기존 페이지가 소리 없이 망가지지 않았습니다.
실제로는 이 체계가 역효과를 냈습니다. 사이트들이 -webkit- 기능에 너무 심하게 의존하게 된 나머지, 결국 다른 엔진들도 웹을 올바르게 렌더링하기 위해 일부 -webkit- 접두사 속성을 직접 구현해야 했습니다. 바로 그 결과 때문에, 이 접근 방식 전체가 실험적 작업을 위한 기능 플래그에 자리를 내주고 대부분 폐기되었습니다.
접두사와 표준을 함께 적는 법
규칙은 간단하고 순서가 중요합니다. 필요한 접두사 버전을 모두 적은 다음, 표준이자 접두사 없는 속성을 맨 마지막에 적으세요. 모두 이해될 때는 뒤에 오는 선언이 이기므로, 표준 줄을 맨 아래에 두면 완전히 최신인 브라우저는 최종의 올바른 동작을 사용하고, 구형 브라우저는 자신이 이해하는 접두사 줄로 폴백합니다. 이 도구는 그 관례를 따라, 선택한 접두사 변형들을 원래의 표준 선언과 나란히 내보내므로 캐스케이드가 기대한 대로 해석됩니다.
같은 개념이 속성 이름뿐 아니라 값에도 가끔 적용되는데, 일부 기능은 값 쪽에도 접두사가 붙었기 때문입니다. 안전한 습관은 동일합니다. 더 오래된 접두사 형태를 제공한 다음, 따라잡은 브라우저를 위해 표준 형태가 그것을 덮어쓰게 두는 것입니다.
대부분의 최신 CSS는 더 이상 접두사가 필요 없습니다
이 부분은 마음에 새겨 둘 만합니다. 한때 접두사가 필요했던 속성의 대다수가 이제는 그렇지 않습니다. 전환, 변형, 애니메이션, box-shadow, border-radius, 그라데이션, 그리고 최신 플렉스박스 문법은 모두 현행 브라우저 전반에서 접두사 없이 지원됩니다. 오늘날 거기에 -webkit-, -moz-, -ms-, -o-를 붙이면 스타일시트를 부풀리는 죽은 코드가 생기고, 나중에 읽는 사람을 혼란스럽게 하며, 드물게는 버그 있는 옛 동작을 활성화하기까지 합니다. 프로젝트가 현행 브라우저만을 대상으로 한다면, 접두사가 전혀 필요 없을 가능성이 매우 큽니다.
그래서 사려 깊은 작업 흐름은 반사적으로 모든 것에 접두사를 붙이지 않습니다. 실제 브라우저 대상이 요구하는 것에만 접두사를 붙여, 아무도 결코 실행하지 않을 줄로 채워지지 않고 출력이 군더더기 없이 정직하게 유지됩니다.
접두사가 여전히 진짜로 중요한 곳
출시된 브라우저에서 일부 기능은 여전히 접두사 전용이거나 접두사가 우선인데, 바로 여기서 접두사는 낡은 군더더기가 아니라 현재의 요구 사항입니다. 특히 -webkit- 접두사는 텍스트를 정해진 줄 수로 잘라 내는 line-clamp 기법, 특정 backdrop과 appearance 동작, 그리고 모바일 Safari의 일부 스크롤바와 탭 하이라이트 조정 같은 것에 여전히 등장합니다. 이들의 경우 접두사를 빼면 기능이 그냥 작동하지 않으므로, 바로 이럴 때가 접두사에 손을 뻗는 것이 옳은 순간입니다.
특정 사용자층을 위해 오래되었지만 여전히 실재하는 브라우저 버전을 지원한다면, 최근에야 표준화된 속성에 대해서도 접두사가 다시 그림 안으로 들어옵니다. 판단을 가르는 질문은 결코 그 속성이 어떻게 느껴지는가가 아니라, 지원 매트릭스에 실제로 무엇이 담겨 있는가입니다.
Autoprefixer와 현대적 빌드 방식
오늘날의 모범 사례는 접두사를 손으로 적기를 그만두고, 도구가 실제 데이터를 바탕으로 추가하게 두는 것입니다. 빌드 단계의 일부로 실행되는 Autoprefixer는 프로젝트에 선언된 브라우저 지원 목록을 읽고, 최신 호환성 데이터를 사용해 그 브라우저들이 요구하는 접두사를 더도 덜도 없이 정확히 삽입합니다. 여러분은 깔끔한 표준 CSS를 적고, 올바른 접두사는 빌드 시점에 자동으로 생성되며, 지원 목록이 더 이상 필요로 하지 않는 순간 다시 제거됩니다.
이 변환기는 그 작업 흐름의 수동 대응물로, 빌드 파이프라인을 돌리지 않을 때, 특정 접두사를 어떤 스니펫에 빠르게 더하고 싶을 때, 또는 접두사 형태와 표준 형태가 어떻게 연관되는지 배우는 중일 때 이상적입니다. 규모가 큰 코드베이스라면 Autoprefixer를 연결해 두는 것이 다시는 이 문제를 신경 쓰지 않는 길입니다.
접두사를 붙이기 전에 지원을 확인하세요
어떤 접두사든 추가하기 전에, caniuse 같은 최신 호환성 참고 자료를 확인해 그것이 정말 필요한지부터 확정하세요. caniuse는 속성별로 어떤 브라우저 버전이 표준 형태를 지원하고 어떤 것이 여전히 접두사를 요구하는지 보여 줍니다. 그 조회를, 프로젝트가 지원하는 브라우저의 명시적 목록과 짝지으면 접두사 붙이기가 막연한 추측에서 변호할 수 있는 결정으로 바뀝니다. 낡은 접두사를 유지하는 비용은 실재하므로, 더 이상 필요 없는 것을 지우는 일은 필요한 것을 더하는 일만큼 가치가 있습니다.
자주 묻는 질문
CSS 벤더 접두사는 무엇을 위한 것인가요?
이 도구는 어떤 접두사를 추가할 수 있나요?
붙여넣은 모든 속성에 접두사를 붙이나요?
오늘날에도 벤더 접두사가 여전히 필요한가요?
내 CSS가 어딘가로 전송되나요?
관련 도구
이런 편리한 도구도 함께 사용해 보세요