css 벤더 프리픽스 자동 생성기
CSS 코드를 입력하면 브라우저 호환성에 필요한 접두사를 실시간으로 추가해 줘요. 서버 전송 없이 모든 작업이 브라우저 내부에서 처리돼요.
css 벤더 프리픽스 자동 추가 방법
웹 브라우저에서 빌드 도구 설정 없이 바로 접두사를 붙일 수 있어요.
- 변환할 CSS 입력창에 작업 중인 CSS 코드를 붙여넣으세요.
- 입력이 끝나면 최신 브라우저 지원 데이터를 기반으로 결과가 자동으로 생성돼요.
- 출력 상자 위에 있는 복사 버튼을 눌러 결과물을 클립보드에 저장하세요.
css 벤더 프리픽스 종류와 지원 범위
주요 브라우저 엔진에 따라 사용하는 접두사가 달라요. Chrome과 Safari 및 최신 Edge는 -webkit-을 사용하고, Firefox는 -moz-를 사용해요. 구형 Internet Explorer와 Edge는 -ms-를, 구형 Opera는 -o-를 사용해요.
이 도구는 더 이상 접두사가 필요 없는 표준 속성에는 접두사를 붙이지 않으므로 불필요한 코드 증가를 막아줘요.
접두사가 실시간으로 생성되는 방식
PostCSS와 Autoprefixer 엔진이 브라우저 내에서 직접 실행돼요. npm 설치나 설정 파일 작성 없이 웹 브라우저만으로 빌드 도구와 동일한 결과를 얻을 수 있어요.
입력한 코드에 문법 오류가 있으면 이전의 유효한 결과가 유지되며, 오류를 수정하는 즉시 변환이 다시 재개돼요.
대상 브라우저 설정하기
대상 브라우저는 기본적으로 > 0.5%, last 2 versions 조건의 범용 타겟(기본값)으로 설정되어 있어요.
프로젝트 환경에 따라 .browserslistrc 파일이나 package.json에서 사용하는 쿼리를 Browserslist 쿼리 (선택) 입력란에 직접 입력하면 특정 브라우저 버전에 맞춘 벤더 프리픽스만 생성할 수 있어요.
자주 묻는 질문
css 벤더 프리픽스 기능은 무엇인가요?
브라우저가 아직 실험적으로 제공하는 CSS 속성을 올바르게 인식하도록 속성명 앞에 붙이는 브라우저 전용 식별자예요. -webkit-, -moz-, -ms-, -o- 등이 있어요.
-webkit-, -moz- 같은 접두사를 아직도 붙여야 하나요?
최신 브라우저에서는 대부분 표준 속성을 지원하지만 user-select나 backdrop-filter 같은 일부 속성은 여전히 특정 브라우저에서 접두사가 필요해요. Autoprefixer를 사용하면 실제로 필요한 속성에만 선택적으로 접두사를 붙여줘요.
이 도구에 붙여넣은 CSS는 안전한가요?
네, 입력한 모든 CSS 코드는 외부 서버로 전송되지 않고 사용자의 웹 브라우저 내에서만 처리되므로 안전해요.
벤더 접두사를 직접 작성하지 않는 편이 좋은 이유는 무엇인가요?
브라우저 업데이트에 따라 필요한 접두사가 계속 바뀌기 때문에 수동 작성 시 쓰이지 않는 코드가 남거나 누락이 생기기 쉬워요. 자동화 도구를 사용하면 최신 데이터베이스를 바탕으로 정확한 접두사만 유지할 수 있어요.
Browserslist 쿼리는 어떻게 작성하나요?
last 2 versions 또는 > 1%처럼 지원하고자 하는 브라우저 범위를 문자열 형태로 작성해요. 원하는 조건을 입력하면 해당 기준에 맞는 접두사만 자동으로 계산돼요.
공식 Autoprefixer 데모와 출력 결과가 다른가요?
동일한 Autoprefixer 엔진을 사용하므로 변환 결과는 완전히 같아요. 이 도구는 모바일 환경에 맞춘 간결한 화면과 실시간 미리보기 기능을 추가로 제공해요.
