מודרנייזר: להשתמש בראש שקט ב-html5/css3
יתכן שאתם מודעים לכל הדיבורים על html5 ו-css3, אך החלטתם לשבת על הגדר. "בשביל מה לי ללמוד עכשיו סטנדרט שלא נתמך בחצי מהדפדפנים?" - אתם שואלים, ובצדק. יש לי כמה תשובות לטיעון הזה:
- יותר ויותר דפדפנים תומכים ב-html5 וב-css3
- ברוב מכשירי ה-mobile מותקנים דפדפנים מודרניים שתומכים ביכולות אלו
- שימוש ב-css3 במקום בתמונות רקע יכול לשפר את זמן הטעינה של האתר שלכם
- בסופו של דבר כל הדפדפנים יתמכו בטכנולוגיות אלו, אז כדאי ללמוד אותן כבר עכשיו
כל אלו הן סיבות מספיק טובות להשתמש בטכנולוגיות החדשות, אך עדיין צריך לעשות זאת באחריות ולספק אלטרנטיבות לדפדפנים ישנים. את זה אפשר לעשות עם מודרנייזר – ספריית ג'אווה-סקריפט שמזהה באילו פיצ'רים של css3 ו-html5 הדפדפן תומך.
איך זה עובד?
מוזדרנייזר מריץ סדרה של בדיקות בעת עליית הדף, ובהתאם מוסיף class לאלמנט html.
בואו נניח שאנחנו רוצים להשתמש ב-rgba כדי ליצור צבע רקע חצי שקוף ל-#container, לשם כך נריץ בדיקה עם מודרנייזר.
דפדפנים שתומכים ב-rgba
<html class="rgba">
עבור ה-html שקיבלנו, אנחנו יכולים לכתוב css באופן הבא:
.rgba #container{
background:rgba(255,255,255,0.7);
}
דפדפנים שלא תומכים ב-rgba
<html class="no-rgba">
לדפדפנים כאלו נספק דרך ה-css תמונת רקע חצי שקופה:
.no-rgba #container{
background: url(bg.png) 0 0 repeat;
}
גיבוי למקרה שג'אווה סקריפט מכובה
כדי לכסות מצבים בהם ג'אווה-סקריפט מכובה אצל המשתמש (נדיר - אבל קורה), מומלץ לכתוב כך את התגית הפותחת של html:
<html class="no-js">
אם מודרנייזר נטען כראוי ה-class ישתנה ל-js בתוספת הפיצ'רים שרצינו לבדוק
<html class="js rgba">
ב-css נוסיף את הסלקטור no-js לסלקטור no-rgba:
.no-js #container, .no-rgba #container{
background: url(bg.png) 0 0 repeat;
}
איך מתקינים?
- גולשים לאתר של מודרנייזר ובוחרים את הפיצ'רים שרוצים לזהות - בהתאם ייבנה קובץ להורדה.
- מוסיפים את ה-
class=no-jsלתגית הפותחת שלhtml. - מקשרים לקובץ המודרנייזר שהורדתם ב-
headולא ב-body- חשוב מאוד!
איך רואים מה יצא?
בכל דפדפן מודרני יש היום כלי פיתוח או developer tools (בפיירפוקס צריך להתקין firebug) לחיצה על F12 או לחצן ימני+Inspect Element בכל מקום בדף, מראה את קוד ה-html לאחר הרינדור של ג'אווה סקריפט.
html של האתר בדפדפן התומך בתמונות רקע מרובות, ב-box-shadow, ובאנימציות css צורות מורכבות יותר של התגית הפותחת
אם נשלב בין טכניקת הוספת class לפי גרסת אקספלורר עליה דיברנו בפוסט קודם, לבין ה-class=no-js נקבל משהו כזה:
<!--[if lt IE 7]><html class="no-js ie6 oldie"><![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie"><![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"> <!--<![endif]-->
יתכן ותרצו להוסיף תנאי ו-class לאקספלורר 9 ואף להשמיט את הכלל הנוגע לאקספלורר 6 שחולף מהעולם.
שימושים לדוגמה
צל טקסט
טכניקה פופולרית כיום היא להשתמש בצל-טקסט (text-shadow) לבן, כך שנראה כאילו האותיות מוטבעות. בדרך כלל משתמשים בטקסט בגוון כהה על רקע כהה, למשל:
כדי לכסות אפשרות זו ניתן לכתוב למשל כלל כזה, שיבהיר את הטקסט:
.no-textshadow body{
color:#999;
}
אחרי שהוספנו את הכלל הנ"ל, כך זה יראה בדפדפנים שלא תומכים בצל-טקסט:
צל קופסא
box-shadow הוא אחד הדברים המגניבים ביותר ב-css3. בעזרת מודרנייזר אפשר למצוא פתרונות לדפדפנים שלא תומכים: תמונת רקע או החלפה של הצל ב-border.
הוספת תמיכה לאלמנטי html5 בדפדפנים ישנים
מודרנייזר כולל בתוכו קוד שיאפשר לכם להשתמש באלמנטים הסמנטיים החדשים (header,nav וחבריו) גם באקספלורר 8 ומטה. אם אתם משתמשים באלמנטים החדשים, אל תשכחו להוסיף להם ב-css את הכלל display:block.
נספח: למה לא כדאי לבדוק user-agent
בעבר השתמשו בזיהוי user-agent (=דפדפן וגרסה) כדי לאבחן תמיכה בפיצ'רים.
שתי מגרעות לשיטה:
- היא לא מדוייקת - אנו בודקים דפדפן וגרסה במקום יכולות. אולי שכחנו את אחד הדפדפנים? אולי זה אקספלורר ישן אך מותקן עליו כרום פריים?
- היא מיושנת ובלתי אפשרית לתחזוק כיום - בעידן ריבוי המכשירים, הדפדפנים, הגרסאות והטכנולוגיות החדשות.