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

Cách sử dụng Trình Tạo Tiền Tố Vendor CSS

1
Dán CSS của bạn
Đưa các quy tắc CSS của bạn, chẳng hạn một khai báo flex hay transition, vào ô nhập mã.
2
Chọn các tiền tố
Chọn những tiền tố nhà cung cấp cần thêm, bao gồm -webkit-, -moz-, -ms- và -o-, dựa trên các trình duyệt bạn cần hỗ trợ.
3
Tạo CSS có tiền tố
Nhấn Generate Prefixes để tạo ra phiên bản mã của bạn với các thuộc tính có tiền tố tương ứng được bổ sung.

4
Sao chép kết quả
Sao chép phần CSS có tiền tố từ ô kết quả và dán lại vào bảng định kiểu của bạn.

Câu hỏi thường gặp

Tiền tố nhà cung cấp CSS dùng để làm gì?

Các tiền tố nhà cung cấp như -webkit-, -moz-, -ms- và -o- cho phép bạn dùng những thuộc tính mà một engine trình duyệt đã triển khai trước khi chúng được chuẩn hóa. Thêm chúng giúp cải thiện khả năng tương thích đa trình duyệt cho các phiên bản cũ.

Công cụ này có thể thêm những tiền tố nào?

Nó có thể tạo bốn tiền tố phổ biến: -webkit- (Chrome, Safari, Edge), -moz- (Firefox), -ms- (Internet Explorer và Edge cũ) và -o- (Opera cũ), và bạn chọn những tiền tố muốn đưa vào.

Công cụ có thêm tiền tố cho mọi thuộc tính tôi dán không?

Nó thêm các biến thể có tiền tố cho những thuộc tính trước đây vốn cần đến chúng và giữ nguyên các thuộc tính chuẩn đã được hỗ trợ đầy đủ, nên kết quả vẫn gọn gàng thay vì bị nhồi thêm những dòng không cần thiết.

Ngày nay tôi còn cần tiền tố nhà cung cấp không?

Nhiều thuộc tính hiện đại không còn cần đến chúng, nhưng tiền tố vẫn hữu ích khi hỗ trợ trình duyệt cũ hoặc các tính năng cụ thể. Công cụ này giúp việc thêm chúng trở nên dễ dàng khi mục tiêu trình duyệt của dự án yêu cầu.

CSS của tôi có được gửi đi đâu không?

Không. Việc thêm tiền tố chạy hoàn toàn trong trình duyệt của bạn, nên CSS không bao giờ được tải lên máy chủ. Công cụ miễn phí và không cần đăng ký.

Công cụ liên quan

Tiếp tục với những công cụ hữu ích này

Bộ Chuyển Đổi Đơn Vị CSS

Công Cụ Tạo Thẻ Meta

Tạo Robots.txt

Open Graph Previewer

Bộ Mã Hóa/Giải Mã Thực Thể HTML

Trình Xem Header HTTP