פיתוח אתרי HTML5 מודרניים עם Modernizr
בזמן שפיתוח אתרים מודרניים העושים שימוש במגוון יכולות של HTML5, CSS3 ו- JavaScript API’s חדשים הולך וצובר תאוצה, עלינו להתמודד עם בעיית התאימות למגוון גירסאות הדפדפנים שנמצאים בשימוש אצל המשתמשים. כיוון שכל דפדפן תומך באלמנטים אחרים של הסטנדרטים המתקדמים באופן טיפה שונה וקצב שונה, עלינו לדעת אילו יכולות עומדות לרשות המשתמש שלנו בדפדפן בו הוא משתמש כדי להציג לו את האתר ולאפשר לו להינות ממנו.
Feature Detection במקום Browser Detection
במשך שנים הדרך לזהות אילו יכולות נתמכות בדפדפן המשתמש הייתה לבדוק את ה- user agent של הדפדפן ולהוסיף קוד מתאים בהתאם. אבל כיום, כשקצב שיחרור הגירסאות של כל יצרני הדפדפנים הולך וגובר, ובמקביל אנחנו רוצים לתמוך בגולשים ממגוון מכשירים ניידים – הגישה הזו אינה טובה מספיק, ומומלץ לנקוט בגישה אחרת.
הכירו את Modernizr
Modernizr היא ספריית JavaScript קטנה שבודקת אילו תכונות של סטנדרטי ה- Web החדשים נתמכות בדפדפן של המשתמש.
חשוב להבין ש- Modernizr לא מוסיפה תמיכה ביכולות שלא קיימות בדפדפן, אלא מזהה אילו יכולות נתמכות או לא נתמכות ומאפשרת לנו ליצור fallbacks מתאימים במידת הצורך.
תכונות מרכזיות:
- Feature Detection של עשרות תכונות של HTML5 ו- CSS3.
- API נוח דרך אובייקט מרכזי אחד
- הוספת CSS Classes בהתאם לתמיכה או לאי תמיכה ביכולות
- מהיר וקל לשימוש
הוספת Modernizr לאתר
הדרך הפשוטה ביותר להוסיף את Modernizr לאתר היא להוסיף את הספרייה כחבילת NuGet מתוך Visual Studio. פשוט הצביעו על הפרוייקט, בחרו באפשרות Manage Nuget Packages, חפשו את Modernizr הוסיפו לפרוייקט.
אפשרות אחרת היא להוריד את הספרייה מאתר הפרוייקט ולהוסיף אותה ידנית.
בכל מקרה, לפני השימוש נוסיף הפניה לקובץ ה- JavaScript בדפי ה- HTML שלנו.
<head>
<title>Modernizr Demo</title>
<script src="Scripts/modernizr-2.0.6.js" type="text/javascript"></script>
</head>
מה מקבלים כשמריצים?
אם נריץ דף עם הפניה לספריית Modernizr, אפילו מבלי שעשינו כל שימוש בה, כבר נוכל לראות מה היא עושה. כש- Modernizr נטענת, היא בודקת אילו תכונות נתמכות בדפדפן המשתמש ומוסיפה CSS Classes לאלמנט הראשי של הדף.
מבט זריז בכלי הפיתוח של הדפדפן, יראה לנו את התמונה הבאה:
הספרייה הוסיפה CSS Classes לאלמנט ה- HTML הראשי של הדף בהתאם לתכונות הנתמכות. לדוגמא, רואים שבאינטרנט אקספלורר 9 יש תמיכה ב- Canvas, איך אין תמיכה ב- WebGL וב- Touch.
שימוש 1 – תמיכה בתכונות CSS3
בדוגמא הזו נראה איך שימוש באותן CSS Classes שנוספו ע”י Modernizr עוזרות לנו כשאנחנו רוצים לעשות שימוש בתכונה כלשהי של CSS3. נניח שבעיצוב האתר שלנו אנחנו רוצים להשתמש ב- border-radius (תכונה חדשה ב- CSS3).
<div class="corners">
<p>Hey, does your browser support this CSS3 feature?</p>
</div>
עד היום כדי לממש פינות עגולות היינו צריכים לכתוב את הקוד הבא:
<style>
.corners {
-moz-border-radius: 17px 17px 17px 17px;
-webkit-border-radius: 17px 17px 17px 17px;
border-radius: 17px 17px 17px 17px;
width: 100px;
height: 100px;
background-color: blue;
color: white;
padding: 15px;
}
</style>
בקוד הנ”ל יש 2 בעיות:
- יש שימוש ב- Vendor Prefix (כגון moz- ו- webkit-) שגורם לשכפול הגדרת העיצוב מספר פעמים.
- אין טיפול במצב בו אין לדפדפן תמיכה ב- border-radius.
השימוש ב- Modernizr פותח את 2 הבעיות האלה:
<style>
.borderradius .corners {
border-radius: 17px 17px 17px 17px;
width: 100px;
height: 100px;
background-color: blue;
color: white;
padding: 15px;
}
.no-borderradius .corners {
background-image: url('Images/background.png');
width: 100px;
height: 100px;
background-color: blue;
color: white;
padding: 15px;
}
</style>
- הספרייה מבטלת את הצורך ב- Vendor Prefix ומאפשרת להשתמש בהגדרה בודדת ללא קידומת. הספרייה דואגת להגדרה המתאימה הנדרשת לכל הדפדפנים התומכים.
- מאחר והספרייה מוסיפה את ה- CSS Classes המתאימים למצב תמיכה או אי תמיכה ביכולת, אנחנו יכולים לתת הגדרות עיצוב ל- 2 המצבים, ועבור מצב בו הדפדפן לא תומך בתכונה לתת עיצוב חלופי (למשל, לממש את הרקע באמצעות תמונה).
נסו להריץ את הדוגמא עצמכם וראו איך היא מוצגת על הדפדפן שלכם.
שימוש 2 – בדיקת תמיכה בתכונות HTML5 דרך JavaScript
HTML5 כולל מספר JavaScript API’s חדשים, כגון geolocation, File API, Web Sockets ועוד, וכמו מגוון רחב של אלמנטים ב- HTML5 הם אינם ממומשים באופן מלא בכל הדפדפנים, וכמובן לא בגירסאות קודמות שלהן שנמצאים בשימוש אצל המשתמשים.
בתור Best Practice לשימוש ביכולות האלה באתרים מודרניים, חובה עלינו לוודא שקיימת תמיכה לפני שאנחנו מנסים לעבוד עם ה- API’s החדשים.
Modernizr מכילה אובייקט גלובלי אחד בשם Modernizr (כמה מפתיע) שחושף מאפיינים בוליאנים שעוזרים לבדוק תמיכה באלמנט מסויים לפני השימוש בו.
לדוגמא, לפני השימוש ב- geolocation, נבדוק שאכן קיימת תמיכה. במידה ולא – נודיע למשתמש או לא נפעיל את הקוד הרלוונטי לשימוש בנתוני המיקום.
<script>
// Check if there is support for geolocation
if (Modernizr.geolocation) {
// If there is support - get the current position
navigator.geolocation.getCurrentPosition(
function (position) {
document.writeln(position.coords.latitude
+ " " + position.coords.longitude);
});
}
// If no support - notify the user
else {
alert("Your Browser does not support GeoLocation.");
}
</script>
נסו להריץ את הדוגמא עצמכם וראו איך היא מוצגת על הדפדפן שלכם.
שימוש 3 – תמיכה בתגיות הסמנטיות החדשות של HTML5
HTML5 כולל מספר תגיות סמנטיות חדשות כגון header, footer, nav, article ועוד שמוסיפות משמעות סמנטית לאלמנטים בדף, ועוזרת מגוון מכשירים, דפדפנים ומנועי חיפוש להבין טוב יותר את תוכן הדף.
לדוגמא, בדף הבא מוגדר אלמנט header לראש הדף, footer לתחתית הדף ואיזור הניווט מוגדר בתוך האלמנט nav.
<!DOCTYPE html>
<html>
<head>
<title>Semantic Tags</title>
<style>
header { color: blue; }
</style>
</head>
<body>
<header>
<h1>Semantic Header</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
<footer>All right reserved.</footer>
</body>
</html>
כאשר מריצים את הדף הזה עם דפדפן מודרני ומסתכלים בכלי הפיתוח של הדפדפן, רואים שמבנה האלמנטים בדף הוא כמו ב- HTML שהגדרנו, והדף מוצג לפי כוונת המפתח (כולל העיצוב של הטקסט ב- header).
לעומת זאת, אם נסתכל בדפדפן בגירסא קודמת, בה אין תמיכה בתגיות הסמנטיות נראה שהדפדפן מתעלם מהתגיות שהוא אינו מכיר. מצד אחד אנחנו לא מקבלים שגיאה כלשהי, אבל מצד שני עיצובים כפי שהגדרנו למעלה על אלמנטים חדשים לא מוצגים.
ע”י הוספת השימוש ב- Modernizr לדף, מבוצע קוד JavaScript שמייצר את התגיות הסמנטיות האלה ב- DOM ועוזר לדפדפנים הישנים להתמודד איתם בצורה טובה יותר. בנוסף, העיצובים ששמנו על התגיות הסמנטיות יעבדו.
סיכום
Modernizr מאפשרת לנו להשתמש במרכיבים של HTML5, CSS3 ו- JavaScripts API’s מודרניים כדי לבנות אפליקציות חדשניות, לזהות בצורה קלה אילו תכונות נתמכות בדפדפן של המשתמש ולתת את הטיפול המתאים.
תהנו!