HTML5 Polyfill

HTML5 כבר כאן, וכולנו רוצים להתחיל להישתמש לכל הפחות בתגיות החדשות שיש לו להציע ע”מ להפוך את האתרים שלנו לסמנטיים יותר. תגיות כמו  header, footer, section, article, nav, aside יכולות מאוד לשפר את הניראות והסדר של הקוד שלנו, כמו גם להגדיר את המסמך בצורה טובה ונכונה יותר.

אלא שיש לנו עדיין מכשול קטן, ושמו Internet Explorer מגירסא 8 ומטה. דפדפן מגירסאות אלו אינו תומך ב-HTML5 כלל, ואם נשלב את תגיות אלו ללא טיפול מתאים – הן יגרמו לעמוד שלנו להיראות מעוות לחלוטין.

הפיתרון הוא שימוש במה שנקרא “HTMl5 Polyfill” – קובץ JavaScript שכאשר הוא מוכלל בעמוד בתוך הדפדפן אקספלורר 8 ומטה – הוא גורם לו להתייחס לתגיות HTML5 בצורה הנכונה.

את קובץ ה-JavaScript ניתן להוריד מכאן: https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js

ניתן לשלב אותו בתוך תגית ה-HEAD בעמוד ה-HTML שלנו, יחד עם תנאי שיגרום רק לדפדפני אקספלורר 8 ומטה להתייחס אליו, כך:

<!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]-->

ישנם Polyfills שיאפשרו ל-APIs נוספים של HTML5 לרוץ על דפדפנים ישנים במסגרת פרוייקט שנקרא Modernizr, ניתן לקרוא בהרחבה בעמוד הפרוייקט ב-GitHub