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
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.
Giải thích về tiền tố vendor trong CSS
Tiền tố vendor thực chất là gì
Tiền tố vendor là một chuỗi ngắn mà nhà sản xuất trình duyệt đặt phía trước tên một thuộc tính hay một giá trị để cho ra mắt một tính năng trước khi nó được hoàn thiện. Bốn tiền tố bạn sẽ gặp là -webkit- cho engine đứng sau Chrome, Safari và Edge hiện đại, -moz- cho Firefox, -ms- cho Internet Explorer cũ và Edge nguyên bản, và -o- cho Opera cũ chạy trên engine Presto. Vậy nên trong những năm chuyển tiếp, bạn có thể viết cả transition-property lẫn -webkit-transition-property, dòng có tiền tố dành cho các trình duyệt đã ra mắt tính năng đó sớm và dòng trơn dành cho các trình duyệt tuân theo tiêu chuẩn cuối cùng.
Về mặt cơ chế, một trình duyệt bỏ qua mọi thuộc tính mà nó không nhận ra, và đó là điều khiến việc xếp chồng tiền tố trở nên an toàn. Bạn có thể liệt kê các biến thể có tiền tố trước và thuộc tính chuẩn sau cùng, rồi mỗi engine chỉ đơn giản lấy dòng nó hiểu được và bỏ qua phần còn lại.
Vì sao tiền tố ra đời ngay từ đầu
Tiền tố là một lời đáp thực dụng cho một bài toán hóc búa. Khi một tính năng mới như gradient, transform hay flexbox còn đang được thiết kế, các nhà cung cấp trình duyệt muốn cho phép lập trình viên thử nghiệm mà không khóa chặt một cú pháp mà bản đặc tả có thể thay đổi. Cho ra mắt tính năng phía sau một tiền tố là một cách nói rằng điều này còn đang thử nghiệm và có thể thay đổi. Nếu tiêu chuẩn cuối cùng khác đi, thuộc tính không tiền tố có thể tiếp nhận hành vi đã được sửa trong khi thuộc tính có tiền tố giữ lại hành vi cũ, để những trang đang tồn tại không lặng lẽ hỏng.
Trên thực tế, hệ thống này phản tác dụng. Các trang web trở nên phụ thuộc vào những tính năng -webkit- nặng nề đến mức cuối cùng các engine khác đã phải tự mình triển khai một số thuộc tính có tiền tố -webkit- chỉ để hiển thị web cho đúng. Chính kết cục đó là lý do toàn bộ cách tiếp cận này phần lớn đã bị từ bỏ, nhường chỗ cho các cờ tính năng (feature flag) dành cho công việc thử nghiệm.
Cách viết dòng có tiền tố và dòng chuẩn cùng nhau
Quy tắc thì đơn giản và trật tự rất quan trọng: hãy viết mọi phiên bản có tiền tố bạn cần, rồi viết thuộc tính chuẩn không tiền tố sau cùng. Vì các khai báo đứng sau thắng khi tất cả đều được hiểu, đặt dòng chuẩn ở dưới cùng nghĩa là một trình duyệt hiện đại đầy đủ sẽ dùng hành vi cuối cùng và đúng đắn, trong khi một trình duyệt cũ hơn lui về dòng có tiền tố mà nó hiểu. Công cụ này tuân theo quy ước đó, phát ra các biến thể có tiền tố bạn chọn bên cạnh khai báo chuẩn gốc để cơ chế cascade phân giải đúng như bạn mong đợi.
Cùng ý tưởng đó đôi khi áp dụng cho các giá trị, chứ không chỉ tên thuộc tính, bởi một vài tính năng cũng từng được gắn tiền tố ở phía giá trị. Thói quen an toàn vẫn y hệt: cung cấp dạng có tiền tố cũ hơn trước, rồi để dạng chuẩn ghi đè nó cho những trình duyệt đã bắt kịp.
Phần lớn CSS hiện đại không còn cần tiền tố
Đây là phần đáng khắc cốt ghi tâm: tuyệt đại đa số các thuộc tính từng đòi hỏi tiền tố thì nay không còn cần nữa. Transition, transform, animation, box-shadow, border-radius, gradient và cú pháp flexbox hiện đại đều được hỗ trợ không cần tiền tố trên các trình duyệt hiện hành. Thêm -webkit-, -moz-, -ms- và -o- vào những thứ đó ngày nay chỉ tạo ra mã chết làm phình bảng định kiểu của bạn, có thể gây bối rối cho người đọc về sau, và trong vài trường hợp hiếm hoi thậm chí kích hoạt hành vi cũ đầy lỗi. Nếu dự án của bạn chỉ nhắm tới các trình duyệt hiện hành, rất có khả năng bạn chẳng cần tiền tố nào cả.
Đó là lý do một quy trình làm việc thấu đáo không gắn tiền tố cho mọi thứ một cách máy móc. Nó chỉ gắn tiền tố cho những gì mà các trình duyệt mục tiêu thực sự yêu cầu, điều này giữ cho đầu ra gọn gàng và trung thực thay vì bị độn thêm những dòng không ai bao giờ chạy đến.
Nơi tiền tố vẫn thật sự quan trọng
Một số ít tính năng vẫn chỉ có tiền tố hoặc cần tiền tố trước trong các trình duyệt đang lưu hành, và đây là chỗ mà một tiền tố không phải tàn dư cũ kỹ mà là một yêu cầu hiện hành. Riêng tiền tố -webkit- vẫn xuất hiện cho những thứ như kỹ thuật line-clamp dùng để cắt bớt văn bản xuống một số dòng cố định, vài hành vi backdrop và appearance nhất định, cùng một số chỉnh tinh về thanh cuộn và vùng sáng khi chạm trên Safari di động. Với những thứ này, bỏ tiền tố nghĩa là tính năng đơn giản là không hoạt động, nên đây đúng là lúc với tới một tiền tố là chính xác.
Nếu bạn hỗ trợ các phiên bản trình duyệt cũ hơn nhưng vẫn còn thực dụng cho một nhóm người dùng cụ thể, tiền tố cũng quay trở lại bức tranh đối với những thuộc tính chỉ vừa mới được chuẩn hóa gần đây. Câu hỏi quyết định không bao giờ là thuộc tính cho cảm giác thế nào mà là ma trận hỗ trợ của bạn thực sự chứa những gì.
Autoprefixer và cách tiếp cận build hiện đại
Thực hành tốt nhất hiện nay là ngừng viết tiền tố bằng tay và để một công cụ thêm chúng dựa trên dữ liệu thực. Autoprefixer, chạy như một phần của bước build, đọc danh sách hỗ trợ trình duyệt được khai báo của dự án và chèn vào đúng những tiền tố mà các trình duyệt đó yêu cầu, không hơn không kém, dùng dữ liệu tương thích cập nhật. Bạn viết CSS chuẩn sạch sẽ, các tiền tố đúng đắn được tạo ra tự động vào lúc build, rồi lại được bỏ đi ngay khoảnh khắc danh sách hỗ trợ của bạn không còn cần đến chúng.
Bộ chuyển đổi này là đối tác thủ công cho quy trình đó, lý tưởng khi bạn không chạy một pipeline build, khi bạn muốn thêm nhanh một tiền tố cụ thể vào một đoạn mã, hoặc khi bạn đang học cách các dạng có tiền tố và dạng chuẩn liên hệ với nhau. Với một cơ sở mã lớn, việc thiết lập Autoprefixer nghĩa là bạn sẽ không bao giờ phải bận tâm về chuyện này nữa.
Kiểm tra hỗ trợ trước khi gắn tiền tố
Trước khi thêm bất kỳ tiền tố nào, hãy xác nhận xem nó có thật sự cần thiết hay không bằng cách tra một tài liệu tham khảo tương thích hiện hành như caniuse, vốn cho thấy theo từng thuộc tính, những phiên bản trình duyệt nào hỗ trợ dạng chuẩn và những phiên bản nào vẫn đòi hỏi tiền tố. Ghép việc tra cứu đó với một danh sách rõ ràng các trình duyệt mà dự án của bạn hỗ trợ sẽ biến việc gắn tiền tố từ chuyện đoán mò thành một quyết định bạn có thể bảo vệ được. Chi phí bảo trì của những tiền tố lỗi thời là có thật, nên việc xóa đi những cái bạn không còn cần cũng giá trị ngang với việc thêm vào những cái bạn cần.
Câu hỏi thường gặp
Tiền tố nhà cung cấp CSS dùng để làm gì?
Công cụ này có thể thêm những tiền tố nào?
Công cụ có thêm tiền tố cho mọi thuộc tính tôi dán không?
Ngày nay tôi còn cần tiền tố nhà cung cấp không?
CSS của tôi có được gửi đi đâu không?
Công cụ liên quan
Tiếp tục với những công cụ hữu ích này