כשאני צריך ליצור דף HTML מאפס, אני כמעט מעולם לא ממש מתחיל לכתוב את ה-doctype ואת שאר האלמנטים. אני בעצם מתחיל תמיד מטמפלייט מסוים. זה שימושי מאד גם לדף אד-הוקי שאני כותב לאיזשהו מקום וגם למערכות גדולות יותר שאני צריך ליצור להן איזה View זה או אחר. השאלה היא – איזה טמפלייט? בשנתיים האחרונות אני מוצא את עצמי תמיד מתחיל מפרויקט שנקרא HTML5 Boilerplate שהוא יופי של טמפלייט דוגמה שאפשר להתחיל ממנו כשמפתחים ל-HTML5. הוא מכיל המון עקרונות וטריקים חשובים ושימושיים שחוסכים לא מעט זמן ומדגימים עקרונות של פיתוח נכון.
ראשית? בשביל מה אני צריך את זה? כבר כתבתי שאני משתמש בזה כשאני צריך לכתוב דף HTML מאפס וצריך איזשהו בסיס, הרי אני לא אתחיל להקליד <body> ואת שאר התגים האלמנטריים כל פעם מחדש. HTML5 Boilerplate פשוט מכיל index.html שמכיל רוב הדברים שאני צריך – אבל לא רק! הוא גם בא עם jQuery, Modernizr וגם קובץ htaccess וכמה קבצים נוספים וחשובים – ואפילו אפשרות לקבל אותו עם twitter bootstrap הפופולרי. כשאני רוצה – אני משתמש בהם. וכשאני לא צריך, אז אני לא.
אז איך משתמשים? פשוט מורידים מהאתר הרשמי של HTML5 Boilerplate. אפשר להוריד את הגרסה האחרונה או ליצור custom build עם תוספות. אני ממליץ, לפחות בהתחלה, פשוט להוריד את הגרסה האחרונה.
מה אפשר למצוא שם?
אחד הדברים הכי מגניבים זה browser detection של גרסת אקספלורר ללא JavaScript. איך? ככה:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
אנו משתמשים בהערות מותנות על מנת להדפיס את גרסת אינטרנט אקספלורר ישירות כ-class של HTML. אני באופן עקרוני מעדיף להשתמש בקבצי CSS מותאמים לכל זוועתון של אינטרנט אקספלורר ואז צריך לעשות שינויים, אבל אם אתם לא נוקטים בשיטה הנלוזה הזו – זה גם נהדר.
דבר נוסף שיש שם הוא שרת מטא מידע שמפעילה את גוגל כרום פריים ומונעת מאקספלורר להפעיל את מצב התאימות:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
השורה הזו חשובה במיוחד כי לפעמים יש sys admins שמפעילים את מצב התאימות באופן אוטומטי לכל האקספלוררים בחברה. הוספת השורה הזו תכריח את האקספלורר לרנדר את הדף באופן החדש ביותר האפשרי ולא כאינטרנט אקספלורר 7.
דבר נחמד מאד שיש ב-Bolierplate זה normalize.css שבניגוד ל-reset.css, לא מנטרל את כל ההתנהגויות הדיפולטיביות של הדפדפנים אלא משמר את ההתנהגויות הטובות של כל הדפדפנים ומשווה ביניהם.
<link rel="stylesheet" href="css/normalize.css">
אחד מהדברים שאני הכי אוהב ב-Boilerplate זה איך שהוא טוען את jQuery – מנסה קודם כל דרך ה-CDN של גוגל ואם לא, אז הוא טוען את זה ממשאב מקומי והכל בשיא האלגנטיות. כך זה נראה:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
ב-plugins.js של boilerplate יש קוד קצר שמונע את שגיאות ה-console בדפדפנים שלא תומכים ב-console (כלומר אקספלוררים למיניהם…)
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
למי שלא יודע – נכון שתמיד עדיף לא להשאיר קוד console ב-Production, אבל גם אם משאירים – זה לא יעשה תקלות בשום דפדפן מודרני. אך באקספלורר אומלל שמנסה לרנדר את הדף ללא כלי מפתחים פתוח – תהיה שגיאה. המפתח האומלל שינסה לדבג את השגיאה יפעיל את כלי המפתחים כמובן, ואז השגיאה לא תתקיים – שעות של הנאה! הכללת הקוד שלעיל תמנע את המצב.
יש עוד המון דברים טובים ב-Boilerplate – בראשם ה-htaccess המצויין והמפורט שלו. אם לא הכרתם אותו עד היום, זה הזמן להכיר!