CSS 입력

접두사가 추가된 CSS

CSS 접두사 예제

벤더 접두사는 크로스 브라우저 지원을 보장합니다. 예시:

Flexbox 및 transform

입력 (접두사 없음):

입력

접두사가 추가된 출력:

출력

위의 샘플을 사용하여 추가 예제 데이터를 불러오세요.

CSS 접두사 추가기란?

브라우저는 표준화되기 전에 벤더 접두사로 CSS 기능을 구현하는 경우가 있습니다: -webkit-(Chrome, Safari), -moz-(Firefox), -ms-(레거시 IE/Edge). CSS 접두사 추가기는 이러한 접두사를 자동으로 추가하여 스타일이 브라우저 전반에서 작동하도록 합니다. W3C CSS 사양이 언어를 정의하며, Can I Use에서 브라우저 지원을 확인할 수 있습니다.

이 도구는 CSS를 파싱하고 필요한 곳에 벤더 접두사를 추가합니다. 브라우저에서 완전히 실행됩니다. 서버로 데이터가 전송되지 않습니다. 최신 브라우저는 예전보다 접두사가 덜 필요하지만, 일부 속성(예: user-select, 오래된 Safari의 display: flex)은 여전히 도움이 됩니다. 형식 지정에는 CSS 포매터를, 최소화에는 CSS 최소화기를 사용하세요.

이 도구 사용 방법

CSS 붙여넣기 또는 업로드

CSS를 복사하여 왼쪽 편집기에 붙여넣으세요. 업로드를 클릭하여 .css 파일을 불러올 수도 있습니다. 샘플 버튼은 예제 데이터를 불러옵니다. 잘못된 CSS는 오류를 표시합니다.

접두사가 추가된 출력 확인

오른쪽 패널에 벤더 접두사가 추가된 CSS가 표시됩니다. display: flex, user-select, transform 같은 속성은 오래된 브라우저에 적합한 접두사를 얻습니다.

복사 또는 다운로드

복사 또는 다운로드를 사용하세요. SCSS나 Less의 경우 먼저 SCSS를 CSS로 또는 Less를 CSS로로 컴파일한 다음 접두사를 추가하세요. 유효성 검사에는 CSS 유효성 검사기를 사용하세요.

CSS 접두사가 도움이 되는 경우

오래된 브라우저(Safari, 오래된 Chrome, 레거시 IE)를 지원하거나 완전히 표준화되지 않은 새로운 CSS 기능을 사용할 때 접두사를 추가하면 호환성이 보장됩니다. Autoprefixer나 PostCSS 같은 빌드 도구가 프로덕션에서 이를 처리하는 경우가 많지만, 이 도구는 일회성 파일, 빠른 확인, 또는 빌드 단계가 없을 때 유용합니다.

이메일 CSS, 임베디드 스타일 또는 CDN 호스팅 CSS는 수동 접두사 추가가 필요할 수 있습니다. 스타일시트를 여기에 실행하면 브라우저 호환 출력을 얻을 수 있습니다. 인라인 스타일로 변환(예: 이메일)하려면 접두사 추가 후 CSS 인라인 변환을 사용하세요.

자주 묻는 질문

2024년에도 여전히 접두사가 필요한가요?

많은 속성에 이제 접두사 없는 지원이 있습니다. 오래된 Safari, iOS 또는 레거시 브라우저에서는 일부 속성(예: -webkit-backdrop-filter)이 여전히 접두사가 필요합니다. 대상 브라우저에 대해 Can I Use를 확인하세요.

데이터는 비공개인가요?

네. 접두사 추가는 브라우저에서 완전히 실행됩니다. 서버로 데이터가 전송되지 않습니다.

Autoprefixer 대신 이것을 사용하는 이유는?

Autoprefixer는 빌드 파이프라인에서 실행됩니다. 이 도구는 브라우저에서 실행됩니다—Node.js나 빌드 단계가 필요 없습니다. 빠른 확인, 일회성 파일 또는 빌드를 실행할 수 없을 때 사용하세요.

모든 속성을 지원하나요?

이 도구는 일반적인 속성에 접두사를 추가합니다. 포괄적인 적용 범위를 위해 빌드에서 Autoprefixer를 사용하세요. 대부분의 경우 이 도구로 충분합니다.

@keyframes는 어떻게 되나요?

키프레임 이름은 일부 컨텍스트에서 접두사가 필요할 수 있습니다. 이 도구는 일반적인 경우를 처리합니다. 복잡한 애니메이션은 대상 브라우저에서 확인하세요.

CSS 접두사 추가기