Học HTML, CSS từ Zero Tới Hero
- CSS Prefix là gì?
- Tại sao cần sử dụng CSS Prefix?
- Tìm hiểu về CSS Vendor Prefix
Tài nguyên trong bài học:
CSS Prefix là gì?
CSS Prefix là những tiền tố ngắn được thêm vào trước các thuộc tính CSS để đảm bảo tính tương thích với các trình duyệt khác nhau.
Các nhà cung cấp trình duyệt sử dụng chúng để hỗ trợ các tính năng mới của CSS trước khi chúng chính thức trở thành một phần của các thông số kỹ thuật CSS.
Tại sao cần sử dụng CSS Prefix?
Khi các thuộc tính CSS được ra mắt dưới dạng thử nghiệm, chưa được đưa vào sử dụng chính thức. Các trình duyệt chưa thể cập nhật kịp thời để sử dụng hoặc đã có cập nhật nhưng chỉ hỗ trợ một phần nào đó. Lúc này, sử dụng CSS Prefix cho phép các trình duyệt sử dụng các thuộc tính thử nghiệm mà không ảnh hưởng đến cách các thuộc tính chuẩn được hiển thị.
Bạn không cần phải nhớ thuộc tính nào cần có tiền tố và thuộc tính nào không.
Để kiểm tra xem thuộc tính nào cần sử dụng tiền tố, chỉ cần thêm đoạn code CSS của bạn vào trang CSS Auto Prefixer, các tiền tố cần thiết sẽ tự động được sinh ra ở bên phải:
Tìm hiểu về CSS Vendor Prefix
Khi trình duyệt đọc code HTML, CSS, nó sẽ lần lượt phân tích cú pháp để hiểu. Sau đó, hiển thị ra giao diện trang web. Quá trình xử lý đó được gọi là Render và Engine (lõi) chính là công cụ thực hiện việc render đó. Mỗi trình duyệt sẽ có một engine khác nhau.
Nhắc tới CSS Vendor Prefix là đang nhắc tới nhà cung cấp trình duyệt và các tiền tố tương ứng của từng trình duyệt. Mỗi trình duyệt sẽ có một vendor (nhà cung cấp) khác nhau:
-webkit-cho Chrome, Safari, hệ điều hành iOS, Android-moz-cho Firefox-o-cho Opera.-ms-cho Internet Explorer và các phiên bản cũ của Edge
Khi viết một thuộc tính CSS (có thể là mới) mà nó không chạy, khả năng là thuộc tính đó cần có tiền tố. Tương tự với trường hợp thuộc tính CSS đó chỉ chạy ở PC, nhưng trên điện thoại thì không. Bạn hoàn toàn có thể thử thêm các tiền tố vào để xác định vấn đề.
Tóm tắt
-
CSS Prefixes là những tiền tố ngắn được thêm vào trước các thuộc tính CSS để đảm bảo tính tương thích với các trình duyệt khác nhau. Chúng hỗ trợ sử dụng các thuộc tính mới của CSS trước khi được đưa vào sử dụng chính thức.
-
CSS Prefix Vendor:
-webkit-cho Chrome, Safari, hệ điều hành iOS, Android-moz-cho Firefox-o-cho Opera.-ms-cho Internet Explorer và các phiên bản cũ của Edge
-
Sử dụng CSS Prefix cho phép các nhà phát triển web sử dụng các thuộc tính CSS thử nghiệm trên nhiều trình duyệt, đảm bảo tính tương thích trước khi các tính năng này được chuẩn hóa.
Nhận xét