modernizr – ספריית JavaScript ל-HTML 5

HTML 5 מהווה אתגר עבור כל מפתח אינטרנט שמתמצא בפרונט אנד. האתר הגדול ביותר כרגע הוא להבחין איזה דפדפן תומך באיזו תכונה. ראשית, התקן של HTML 5 עדיין (נכון לזמן כתיבת שורות אלו) לא נסגר. שנית, גם התמיכה בתכונות מסוימות בדפדפנים משתנות. תמיכה מלאה ב-Canvas למשל, לא היתה בשועל האש עד גרסה 3.5. אקספלורר עם כרום פריים תומך כמעט במלואו בתקן HTML 5. נכון לכתיבת שורות אלו, אופרה תומך באופן המלא ביותר בתגית וידאו אבל פיירפוקס תומך באופן חלקי.

לסיכומו של עניין, בגלל שהתקן כל כך חדש והתמיכה של הדפדפנים לא מלאה, יש לנו בעיה בפיתוח של HTML 5. מטבע הדברים, אם נרצה להכניס אלמנטים חדשים של HTML 5, נרצה גם אפשרות להכניס fall backs עבור דפדפנים שלא תומכים באלמנטים שלנו. כך למשל, אם נכניס אלמנט וידאו לאתר שלנו, נרצה שבמידה ואיזה פרחח יכנס עם אקספלורר 6 אז הוא יכול לראות נגן פלאש או לפחות איזו הודעת שגיאה נורמלית.

בדיוק בשביל זה קיימת modernizr – ספריה קטנה, נוחה וקלה לשימוש שבודקת באופן פרטני את התמיכה בכל אלמנט של HTML 5. בניגוד ל-browser sniffing שבו אנו בודקים את הדפדפן והגרסה שלו, modernizr מספקת אובייקט בשם Modernizr שבו יש מידע על כל האלמנטים החדשים של HTML 5. ה-modernizr מספקת sniffing גם באמצעות JavaScript וגם באמצעות CSS (כן, כן ואני מייד אסביר).

modernizr ב-JavaScript

הכי טוב להדגים הבה ונניח שיש לי אלמנט canvas חביב שכל מה שיש בו זה ריבוע כחול. הקוד המלא הוא:

<!-- Canvas HTML element -->
<canvas id="myCanvas"></canvas>

<script type="text/javascript">
/* JavaScript API for Canvas */
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
if (context) {
    context.fillStyle = '#00f';
    context.fillRect(0, 0, 150, 100);
}
</script>

אם אנחנו נשים את הקוד הזה ככתבו וכלשונו, בדפדפן מודרני כמו פיירפוקס, אופרה, כרום, ספארי וכו' אנו נראה ריבוע כחול. אך אם אני אגלוש עם אינטרנט אקספלורר 6, 7 או 8, אני לא אראה דבר ואז מה יעזור לי ה-HTML 5 המגניב? בדיוק בשביל זה אני אשתמש ב-modernizr על מנת שיקפיץ לי alert אם הדפדפן שלי לא תומך ב-Canvas. בין אם מדובר באינטרנט אקספלורר ובין אם מדובר בגרסה ישנה של פיירפוקס:

<script type="text/javascript" src="/internet_files/html5/modernizr-1.1.min.js"></script> 
<!-- Canvas HTML element -->
<canvas id="myCanvas"></canvas>

<script type="text/javascript">
/* JavaScript API for Canvas */
if (Modernizr.canvas) {
    var elem = document.getElementById('myCanvas');
    var context = elem.getContext('2d');
    if (context) {
        context.fillStyle = '#00f';
        context.fillRect(0, 0, 150, 100);
    }
}
else {
    alert("hey! You don't have Canvas!");
}

מה שעשינו הוא להכניס את קובץ המקור של modernizr (שוקל כקילובייט אחד) על מנת שאובייקט modernizr יהיה זמין עבורנו ואז לשאול את אובייקט modernizr אם תכונת Canvas קיימת אצלו. במידה וכן, אז הדפדפן תומך ב-canvas. במידה ולא, אנו נקפיץ alert. כאשר אנחנו יכולים כמובן לעשות כל פעולה ולא רק להריץ alert.

והנה הדוגמא החיה:

כל התכונות של אובייקט נמצאות בדוקומנטציה של modernizr.

modernizr ב-CSS

modernizr דואגת להכניס class באלמנט ה-html שבו יש את כל התכונות. כך למשל, אם הדפדפן שלי תומך ב-canvas, תהיה לי class של canvas. במידה ואין תמיכה כזו, תהיה לי class של .no-canvas. כך גם בנוגע לכל התכונות. ברגע שיש לי modernizr בדף, יש לי שפע של classים באלמנט ה-html שיסייעו לי ליצור fallbacks ב-CSS. רוצים דוגמא? הפעילו את ה-Firebug שלכם ותסתכלו על אלמנט ה-html של הדף:

בדוקומנטציה יש את מלוא התגיות של CSS.

modernizr ואלמנטים סמנטיים ב-HTML 5

ב-HTML 5 יש שפע של אלמנטים סמנטיים שאפשר להשתמש בהם. אך אליה וקוץ בה, אינטרנט אקספלורר (6,7 ו-8) לא מכירים באלמנטים הסמנטיים באלו. modernizr אחראית גם לזה ומחליפה את ה-section, header, footer וחבריהם ב-div בדפדפני האקספלורר החביבים. מעכשיו אפשר להשתמש בחלק הסמנטי של HTML 5 בלי בעיות מיוחדות.

סיכום

modernizr הוא ספרית JavaScript קטנה וחשובה שמאפשרת את הפיתוח ל-HTML 5 כבר היום. אנו יכולים להתחיל לפתח ל-HTML 5 עם fallbacks לבעלי דפדפנים מיושנים.