3

Bạn đã bao giờ tự hỏi về các dấu -moz- hoặc -webkit- trong CSS có nghĩa là gì chưa? Vâng, nếu bạn có, bạn đang ở đúng nơi! Những đánh dấu được gọi là tiền tố nhà cung cấp .

Giới thiệu về tiền tố nhà cung cấp

Hãy trả lời câu hỏi: Tiền tố nhà cung cấp là gì? Nói một cách đơn giản, tiền tố của nhà cung cấp là một cách để trình duyệt của bạn hỗ trợ các tính năng CSS mới trước khi chúng được hỗ trợ đầy đủ trong tất cả các trình duyệt.

Khi CSS3 trở nên phổ biến, tất cả các loại tính năng mới bắt đầu xuất hiện. Thật không may, không phải tất cả chúng đều được hỗ trợ trên tất cả các trình duyệt. Tiền tố nhà cung cấp đã giúp các nhà phát triển sử dụng các tính năng mới đó và hỗ trợ chúng ngay lập tức mà không phải chờ đợi mỗi tính năng này có sẵn cho mọi trình duyệt.

Tiền tố nhà cung cấp không phải là một hack và bạn nên thoải mái sử dụng chúng.

Một cách tốt để kiểm tra tài sản nào có sẵn để sử dụng mà không có tiền tố của nhà cung cấp là kiểm tra dịch vụ CanIUse . Ở đó bạn có thể thấy trình duyệt nào hiện đang hỗ trợ thuộc tính nào.

Tiền tố

Các trình duyệt chính sử dụng các tiền tố sau:

  • -webkit- Chrome, Safari, các phiên bản Opera mới hơn, gần như tất cả các trình duyệt iOS.
  • -Moz- Firefox.
  • -o- Phiên bản cũ của Opera.
  • -ms- Microsoft Edge và Internet Explorer.

Khi sử dụng tiền tố của nhà cung cấp, hãy nhớ rằng chúng chỉ là tạm thời . Rất nhiều thuộc tính cần có tiền tố nhà cung cấp gắn liền với chúng hiện được hỗ trợ đầy đủ và không cần chúng.

Bạn nên sử dụng chúng như thế nào?

Bạn có thể dễ dàng sử dụng tiền tố của nhà cung cấp, chỉ cần thêm chúng vào trước thuộc tính, như thế này:

.element {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}

Trong trường hợp này, bạn đảm bảo thuộc tính được hỗ trợ trong trình duyệt.

Đó là một thực hành tốt để đặt tài sản chưa được trộn ở dưới cùng. Bằng cách này, bằng cách sử dụng tính chất xếp tầng của CSS, bạn đảm bảo rằng khi thuộc tính được hỗ trợ đầy đủ, đây là thuộc tính mà nó sẽ sử dụng.

Những tài sản cần tiền tố?

Đây là một câu hỏi thường gặp. Một điều tốt là sẽ ngừng đoán và kiểm tra các trang web này:

Mệt mỏi vì viết tiền tố?

Nếu bạn cảm thấy mệt mỏi với việc viết tiền tố mỗi khi bạn cần, có một vài dịch vụ autoprefix có thể giúp bạn:

Phần kết luận

Hy vọng rằng, phần giới thiệu ngắn này về tiền tố của nhà cung cấp đã giúp bạn hiểu họ nhiều hơn và bớt sợ họ hơn. Hãy chắc chắn sử dụng chúng một cách chính xác trong các dự án mới của bạn và hãy nhớ: tiền tố của nhà cung cấp là bạn của chúng tôi!

|