Bài viết được sự cho phép của tác giả Tino Phạm
Các công nghệ mới hiện nay như là: HTML5, ES6, ES7,… đã được sử dụng rất nhiều. Tuy nhiên, các công nghệ này vẫn còn bị giới hạn việc sử dung cho các trình duyệt phiên cũ không hỗ trợ.
Sau đây là một số loại Polyfill được sử dụng phổ biến nhất. Tìm hiểu Polyfill là gì ở đây
01. html5shiv
Project URL: https://github.com/aFarkas/html5shiv
Các phiên bản IE 9 trơ về trước không hiểu được các thẻ mới trong HTML5 như là
hoặc là
. Chính vì vậy khi ứng dụng của bạn viết bằng HTML5 và chạy trên các trình duyệt cũ này sẽ không thể hiển thị nội dung hoặc làm cho giao diện web trở nên lộn xộn. Một trong những cách phổ biến là sử dụng polyfills.
html5shiv sẽ làm cho IE có thể hiểu được các thẻ mới trong HTML5 bằng cách gọi hàm document.createElement(“tagname”) mỗi khi gặp một phần tử mới của HTML5 một cách chính xác. Nó còn bao gồm các kiểu trình bày mặc định cho các thẻ HTML5.
Sử dụng:
Tải file html5shiv.js từ link trên và copy & paste và phần của trang html của bạn.
//path/to/html5shiv.js
Chú ý:
Nếu bạn đang dùng Modernizr. Đây là một plugin tương tự như html5shiv. Vì thế bạn chỉ cần dùng Modernizr hoặc là html5shiv.
Lời khuyên
Bạn nên sử dụng html5shiv nếu như bạn đang dùng HTML5 và website có thể được hoạt động tốt ngay cả với các trình duyệt cũ.
02. -prefix-free
Project URL: http://leaverou.github.com/prefixfree/
Mặc dù mục đích của hầu hết các polyfills là nhắm vào các trình duyệt cũ, một số tồn tại chỉ đơn giản là đưa các trình duyệt hiện tại chuyển tiếp nhiều hơn một chút. Lea Verou’s -prefix-free chính là một loại polyfill như vậy. Nó cho phép các trình duyệt hiện tại nhận ra các phiên bản không tiền tố của một số thuộc tính CSS3 thay vì yêu cầu bạn phải viết ra tất cả các tiền tố đó. Nó đọc stylesheets của website của bạn và thay thế bất kỳ thuộc tính nào chưa có tiền tố mà được các trình duyệt mới công nhận.
Sử dụng
Tải file prefixfree.min.js theo link trên. Sau đó copy & paste vào của trang html.
/path/to/prefixfree.min.js
Chú ý:
Một giới hạn lớn nhất đã được mô tả trên trang chủ của Prefix-free. Ngoài ra, bạn phải đảm bảo tải prefix-free trước khi tải các file CSS trước khi hiển thị cho người dùng xem.
Lời khuyên:
Hãy sử dụng nếu bạn đang lo lắng về kích thước file CSS hoặc là khó chịu bởi việc viết các tiền tố trong css.
03. Selectivizr
Project URL: http://selectivizr.com/
Keith Clark’s Selectivizr là một polyfill phổ biến để giúp bạn sử dụng CSS3 với các phiên bản từ IE8 trở xuống tốt hơn. Nó đọc stylesheets của bạn và tìm những thuộc tính của CSS3, sau đó nó sẽ dùng thư việc Javascript để tao tìm các phần tử html đang được gán các thuộc tính CSS3, áp dụng styles trực tiếp đến các phần tử đó. Nó sử dụng một số thư viện Javascript, một trong số đó có thể bạn đang dùng cho trang của bạn.
Keith Clark’s Selectivizr is a popular polyfill for making many CSS3 selectors work in IE 8 and below. It reads the page’s stylesheets looking for a number of known CSS3 selectors, then uses a JavaScript selector library to query the document for elements matching those selectors, applying the styles directly to those elements. It supports several JavaScript selector libraries, one of which you’re probably already using in your page.
Sử dụng
Tải file selectivizr.min.js theo link trên. Sau đó copy & paste vào của trang html.
/path/to/jquery.min.js
/path/to/selectivizr-min.js
Chú ý
Một số lưu ý sử dụng được mô tả ở cuối trang selectivizr.com. Việc quan trọng nhất là các truy vấn được chạy ngay khi trang được load và không tự động xử lý bổ sung tới DOM mà việc đó chính là dùng với trang web động.
Lời khuyên
Hãy dùng nó với các trang web tĩnh, nhưng đi cùng các chức năng truyền thống khác (như là các lớp đơn giản) trên các trang lớn.
04. es5-shim
Project URL: https://github.com/kriskowal/es5-shim/
ECMAScript 5th Edition (“ES5”) mang đến cho chúng ta nhiều tính năng mới trong javascript, và trên các trình duyệt cũ thì các Javascript engines cũ không hỗ trợ các tính năng này. es5-shim sẽ giúp trình duyệt cũ có thể đọc và hiểu được code javascript được viết bằng ES5. es5-shim có 2 phần: es5-shim.js chứa các phương thức đầy đủ, và es5-sham.js chứa các phương thức chính để sử dụng.
Sử dụng
Tải es5-shim.min.js (và/hoặc es5-sham.min.js) từ link trên, sau đó nhúng vào trang html trước khi viết code javascript mà có dùng các tính năng của ES5.
/path/to/es5-shim.min.js
Chú ý
Nếu bạn chỉ cần một vài tính năng mới trong ES5 thì sử dụng es5-shim.js. Vì nó có sẵn các tính năng chính để có thể sử dụng và nó nhẹ.
Lời khuyên
Chắc chắn dùng nó nếu code Javascript củ bạn có dùng các phương thức của ES5, để các trình duyện có thể đọc và thư thi các các phương thức nhanh chóng.
dịch từ nguồn: http://www.creativebloq.com/html5/10-best-polyfills-2133015
Bài viết gốc được đăng tải tại thangphampt.wordpress.com
Có thể bạn quan tâm:
- 10 tuyệt kĩ từ trang web nhanh nhất thế giới (phần 2)
- Vì sao nút Like Facebook chiếm tới 16% lượng code của website
- Kiến thức về “Lazy-loading images” mà bạn cần biết
Xem thêm Việc làm Developer hấp dẫn trên TopDev
