Chúng là gì và tại sao bạn nên sử dụng chúng
Tiền tố nhà cung cấp CSS, đôi khi còn được gọi là tiền tố trình duyệt CSS , là cách để các nhà sản xuất trình duyệt thêm hỗ trợ cho các tính năng CSS mới trước khi các tính năng đó được hỗ trợ đầy đủ trong tất cả các trình duyệt. Điều này có thể được thực hiện trong một thời gian thử nghiệm và thử nghiệm, nơi nhà sản xuất trình duyệt đang xác định chính xác các tính năng CSS mới này sẽ được triển khai như thế nào. Những tiền tố này trở nên rất phổ biến với sự nổi lên của CSS3 một vài năm trước đây.
Khi CCS3 lần đầu tiên được giới thiệu, một số thuộc tính kích thích bắt đầu tấn công các trình duyệt khác nhau vào những thời điểm khác nhau. Ví dụ, các trình duyệt hỗ trợ webkit (Safari và Chrome) là những trình duyệt đầu tiên giới thiệu một số thuộc tính kiểu hoạt ảnh như chuyển đổi và chuyển đổi. Bằng cách sử dụng các đặc tính tiền tố của nhà cung cấp, các nhà thiết kế web có thể sử dụng các tính năng mới trong công việc của họ và cho họ thấy trên các trình duyệt hỗ trợ chúng ngay lập tức, thay vì phải đợi cho mọi nhà sản xuất trình duyệt khác bắt kịp!
Vì vậy, từ quan điểm của một nhà phát triển web front-end, tiền tố trình duyệt được sử dụng để thêm các tính năng CSS mới vào một trang web trong khi có sự thoải mái khi biết rằng các trình duyệt sẽ hỗ trợ các kiểu đó. Điều này có thể đặc biệt hữu ích khi các nhà sản xuất trình duyệt khác nhau thực hiện các thuộc tính theo các cách hơi khác nhau hoặc với một cú pháp khác.
Trình duyệt CSS tiền tố mà bạn có thể sử dụng (mỗi trình duyệt cụ thể cho một trình duyệt khác nhau) là:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Trong hầu hết các trường hợp, để sử dụng thuộc tính CSS kiểu mới, bạn lấy thuộc tính CSS chuẩn và thêm tiền tố cho mỗi trình duyệt. Các phiên bản tiền tố sẽ luôn xuất hiện đầu tiên (theo bất kỳ thứ tự nào bạn thích) trong khi thuộc tính CSS bình thường sẽ đến cuối cùng. Ví dụ, nếu bạn muốn thêm một quá trình chuyển đổi CSS3 vào tài liệu của bạn, bạn sẽ sử dụng thuộc tính chuyển tiếp như hình dưới đây:
-webkit- quá trình chuyển đổi: tất cả 4s dễ dàng;
-moz- chuyển tiếp: tất cả 4s dễ dàng;
-ms- chuyển tiếp: tất cả 4s dễ dàng;
-o- chuyển tiếp: tất cả 4s dễ dàng;
chuyển đổi: tất cả 4s dễ dàng;
Lưu ý: Hãy nhớ rằng, một số trình duyệt có cú pháp khác nhau cho các thuộc tính nhất định so với các trình duyệt khác, do đó, đừng cho rằng phiên bản tiền tố của trình duyệt là chính xác giống như thuộc tính chuẩn. Ví dụ, để tạo một gradient CSS , bạn sử dụng thuộc tính linear-gradient. Firefox, Opera và các phiên bản Chrome và Safari hiện đại sử dụng thuộc tính đó với tiền tố thích hợp trong khi phiên bản đầu của Chrome và Safari sử dụng thuộc tính tiền tố -webkit-gradient. Ngoài ra, Firefox sử dụng các giá trị khác với các giá trị tiêu chuẩn.
Lý do bạn luôn kết thúc khai báo của mình với phiên bản thông thường, không có tiền tố của thuộc tính CSS để khi trình duyệt hỗ trợ quy tắc, trình duyệt sẽ sử dụng quy tắc đó. Hãy nhớ cách đọc CSS. Các quy tắc sau được ưu tiên hơn các quy tắc trước đó nếu độ đặc hiệu giống nhau, do đó trình duyệt sẽ đọc phiên bản của nhà cung cấp và sử dụng nếu nó không hỗ trợ quy tắc bình thường, nhưng một khi nó hoạt động, nó sẽ ghi đè phiên bản nhà cung cấp quy tắc CSS thực tế.
Tiền tố nhà cung cấp không phải là một Hack
Khi tiền tố của nhà cung cấp được giới thiệu lần đầu tiên, nhiều chuyên gia web tự hỏi liệu họ có bị hack hay dịch chuyển trở lại những ngày đen tối của việc sử dụng mã của trang web để hỗ trợ các trình duyệt khác nhau hay không (nhớ những thông điệp " Trang này được xem tốt nhất trong IE "). Tuy nhiên, tiền tố của nhà cung cấp CSS không phải là hack và bạn không nên đặt trước về việc sử dụng chúng trong công việc của mình.
Một lỗi CSS khai thác lỗ hổng trong việc thực hiện một phần tử hoặc thuộc tính khác để có được một thuộc tính khác hoạt động chính xác. Ví dụ, mô hình hộp hack khai thác lỗ hổng trong phân tích cú pháp thuộc tính gia đình thoại hoặc trong cách trình duyệt phân tích cú pháp dấu chéo ngược (\). Nhưng những hacks này được sử dụng để khắc phục sự cố về sự khác biệt giữa cách Internet Explorer 5.5 xử lý mô hình hộp và cách Netscape giải thích nó, và không liên quan gì đến kiểu giọng nói của gia đình. Rất may, hai trình duyệt đã lỗi thời này là những trình duyệt mà chúng tôi không có mối quan tâm với những ngày này.
Tiền tố của nhà cung cấp không phải là hack vì nó cho phép đặc tả thiết lập các quy tắc về cách một thuộc tính có thể được triển khai, đồng thời cho phép các nhà sản xuất trình duyệt triển khai thuộc tính theo cách khác mà không phá vỡ mọi thứ khác. Hơn nữa, các tiền tố này đang làm việc với các thuộc tính CSS mà cuối cùng sẽ là một phần của đặc tả . Chúng tôi chỉ đơn giản là thêm một số mã để có thể truy cập vào tài sản sớm. Đây là một lý do khác khiến bạn kết thúc quy tắc CSS với thuộc tính bình thường, không có tiền tố. Bằng cách đó bạn có thể thả các phiên bản tiền tố sau khi hoàn thành hỗ trợ trình duyệt hoàn chỉnh.
Bạn muốn biết hỗ trợ của trình duyệt cho một tính năng nhất định là gì? Trang web CanIUse.com là một tài nguyên tuyệt vời để thu thập thông tin này và cho bạn biết trình duyệt nào và phiên bản nào của các trình duyệt đó hiện đang hỗ trợ một tính năng.
Tiền tố của nhà cung cấp là gây phiền nhiễu nhưng tạm thời
Có, nó có thể cảm thấy khó chịu và lặp đi lặp lại để phải viết các thuộc tính 2-5 lần để làm cho nó hoạt động trong tất cả các trình duyệt, nhưng đó là một tình huống tạm thời. Ví dụ, chỉ một vài năm trước, để thiết lập một góc tròn trên một hộp bạn phải viết:
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;
Nhưng bây giờ các trình duyệt đã hỗ trợ đầy đủ tính năng này, bạn thực sự chỉ cần phiên bản tiêu chuẩn hóa:
border-radius: 10px 5px;
Chrome đã hỗ trợ thuộc tính CSS3 kể từ phiên bản 5.0, Firefox đã thêm nó vào phiên bản 4.0, Safari đã thêm nó vào 5.0, Opera trong 10.5, iOS 4.0 và Android phiên bản 2.1. Ngay cả Internet Explorer 9 cũng hỗ trợ nó mà không có tiền tố (và IE 8 và thấp hơn không hỗ trợ nó có hoặc không có tiền tố).
Hãy nhớ rằng các trình duyệt luôn thay đổi và các phương pháp tiếp cận sáng tạo để hỗ trợ các trình duyệt cũ hơn sẽ được yêu cầu trừ khi bạn đang lập kế hoạch xây dựng các trang web nhiều năm sau các phương pháp hiện đại nhất. Cuối cùng, việc viết các tiền tố trình duyệt dễ dàng hơn nhiều so với việc tìm kiếm và khai thác các lỗi có nhiều khả năng sẽ được sửa trong một phiên bản trong tương lai, yêu cầu bạn tìm một lỗi khác để khai thác và cứ thế.