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.

Enter Your CSS

CSS Properties

Enter one CSS property per line or separate with semicolons

Browser Support

WebKit

(Safari, Chrome)

Mozilla

(Firefox)

Microsoft

(IE, Edge)

Opera

Generated CSS with Vendor Prefixes

  display: flex;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 1s ease-in-out;
  -moz-animation: fade 1s ease-in-out;
  -ms-animation: fade 1s ease-in-out;
  -o-animation: fade 1s ease-in-out;
  animation: fade 1s ease-in-out;

Tips

• 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 벤더 접두사는 무엇을 위한 것인가요?

-webkit-, -moz-, -ms-, -o- 같은 벤더 접두사는 표준화 이전에 브라우저 엔진이 구현한 속성을 사용할 수 있게 해 줍니다. 접두사를 추가하면 구버전 브라우저에 대한 크로스 브라우저 호환성이 향상됩니다.

이 도구는 어떤 접두사를 추가할 수 있나요?

흔히 쓰이는 네 가지 접두사, 즉 -webkit-(Chrome, Safari, Edge), -moz-(Firefox), -ms-(구버전 Internet Explorer 및 Edge), -o-(구버전 Opera)를 생성할 수 있으며, 포함할 접두사를 직접 선택합니다.

붙여넣은 모든 속성에 접두사를 붙이나요?

과거에 접두사가 필요했던 속성에는 접두사 변형을 추가하고, 완전히 지원되는 표준 속성은 그대로 두므로, 불필요한 줄로 채워지지 않고 출력이 깔끔하게 유지됩니다.

오늘날에도 벤더 접두사가 여전히 필요한가요?

많은 현대 속성은 더 이상 접두사가 필요 없지만, 레거시 브라우저나 특정 기능을 지원할 때는 여전히 유용합니다. 이 도구는 프로젝트의 브라우저 대상이 요구할 때 접두사를 쉽게 추가하게 해 줍니다.

내 CSS가 어딘가로 전송되나요?

아니요. 접두사 처리가 브라우저 안에서 전부 이루어지므로 CSS가 서버로 업로드되지 않습니다. 이 도구는 가입 없이 무료로 사용할 수 있습니다.

CSS Vendor Prefix Generator

CSS 벤더 접두사 생성기 사용 방법

자주 묻는 질문

관련 도구