12 בספט׳ 2012

ספריית modernizr - יצירת סביבת עבודה עם CSS3 ו HTML5


Modernizr - javascript library to work with HTML5 & CSS3
Modernizr היא ספריייה javascript.
תפקיד הספרייה לזהות זמינות של פיצרים טכנולוגים מתקדמים, כלומר תכונות שנגזרות מן HTML5 ו CSS3. רבים ממאפיינים אלה כבר מיושמים בדפדפן עיקרי אחד לפחות (רובם בשתיים או יותר).

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

שלא כמו בשיטות הלא אמינות הותיקות שהיינו מחפשים סוג דפדפן וגרסה ע"י שימוש ב navigator.userAgent, וע"י כך עושים תיקון פר גרסה.
בעזרת Modernizr אנחנו עושים גילוי אם תכונה פעילה וקיימת, ובמידה ולא קיימת נוסיף טיפול מתאים שהדפדפן הלא תקין/ישן יוכל להתמודד איתו.
ע"י כך נוכל לזהות בקלות טיפולים לדברים שלא נתמכים, ובנוסף לא נצטרך לדאוג שתצא גרסה חדשה של דפדפן, כי הטיפול הוא פר פיצר, ובמידה והגרסה החדשה של הדפדפן תומכת, הפיצר אמור לעבוד לנו אוטומטית.



1. אז איך להפעיל את Modernizr ?

  • די פשוט, ניגשים לדף ההורדה של Modernizr ,אנחנו יכולים לבחור פריטים ספציפים שאנחנו רוצים שהספרייה תבדוק, אני אישית ממצליץ לכם לסמן את כל הפריטים של CSS3 ו HTML5 ע"י לחיצה על toggle ליד הכותרת של כל אחד מהם, ולבסוף נוריד את הקובץ.
  • נצרף את הקובץ JS שנוצר בתוך תגית ה head שלנו.   
דוגמא 
<script src="modernizr.custom.js"></script>


2. עכשיו כאשר נטען את דף האינטרנט שלנו, אחרי שצירפנו לו את קובץ ה JS של Modernizr, אנחנו נראה ב-inspector כלשהוא שיש לכם בדפדפן, שנוספו לתגית HTML  הרבה classים.
 
צילום מסך



טוב יופי, אז מה עושים איתם ?!

3. עבודה עם ה classים של CSS ש-Modernizr יצר לנו :
נניח שאנחנו רוצים להשתמש בצל על אלמנטים של תמונות בדף שלנו. הצל נתמך בכל הדפדפנים פרט לדוגמא אקספלורר בגרסאות הישנות (אקספלורר 9 תומך), אנחנו יוצאים מנקודת הנחה שאנחנו יודעים שלא כל הדפדפנים תומכים, אבל לא מתאים לנו לבדוק כל דפדפן ואת ההתנהגות שלו.

דוגמא למימוש דרך CSS

אז מה שנעשה בעצם, נשתמש בstyle של צל לדוגמא לכל האלמנטים עם class בשם image.
עד פה הכל רגיל, מה שנעשה עכשיו אני ישתמש בclass שלדוגמא יופיע לי באקספלורר 8 , בשם no-boxshadow, שבעצם מציין לי שאקספלורר 8 לא תומך בצל, ואני יוסיף רווח ויתן את שם ה class של האלמנט שרציתי לתת לו צל, בדוגמא שלנו זה יהיה ל class ה image, ופה אני יחליט על טיפול לדפדפן שלא תומך, במקרה שלנו אקספלורר 8, אני החלטתי בדוגמא שלי שמתאים לתת style של outline ברוחב של 2 פיקסלים עם צבע אפור, למה דווקה outline ולא border, כי outline לא תפוס נפח בשונה מ border לפי תפיסת ה box model.

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


דוגמא - צל ב CSS3
.image{box-shadow: 0 0 10px #000;}

דוגמא - לטיפול לדפדפן שלא תומך בצל
.no-boxshadow .image {outline:#222 solid 3px;}


4. עבודה עם API בjavascript, שמספק לנו ה Modernizr:
ספריית Modernizr, מאפשרת לנו לטפל גם דרך ה javascript, ומומלץ להשתמש בצורה הזאת לגבי מה שרלונטי יותר ל JS. לדוגמא פקדים של HTML5, שלא קיימים בדפדפנים ישנים.

דוגמא למימוש דרך JS

בוא ניקח לדוגמא פקד מסוג אימייל, בפקדים החדשים, ניתן ליצור ולידציות ללא JS דרך הגדרות של HTML5 ו CSS3, אך במידה ואנחנו נגלוש בדפדפן ישן, הולידציות והCCS3 לא יפעלו לנו כראוי, וכנראה ונצטרך להוסיף טיפול הולם דרך JS.
Modernizr מאפשרת לנו גישה דרך API שלה לדעת עם אלמנט מסוג חדש נתמך או לא, בצורה מאוד פשוטה.

דוגמא לבדיקה האם הדפדפן תומך בפקד מסוג אימייל -

if (Modernizr.inputtypes.email){  
alert("true");
}
else{
       // input type email fallback
alert("false");
}

התוצאה תיהיה שבמידה והדפדפן תומך בפקד אימייל הוא יבצע את הקוד שנמצא בתוך ה IF, במידה ולא קיים הפקד
יבוצע קטע הקוד ב ELSE, ופה נוכל לכתוב קוד תמיכה שיתמוך בדפדפנים שלא תומכים בפקדים חדשים.

טיפול עם Modernizr למשתמשים ב less (עבודה עם ספרית less)

למשתמשים המשתמשים בספריית less, עקב הקינון של האלמנטים כביכול נוצרת בעיה, less נותנת פתרון נהדר, היא מאפשרת בתוך קינון אלמנטים לכתוב  קריאה שמתייחסת לאלמנט אבא, וע"י כך לדעת לשמור על כתיבה מקוננת.
בדוגמא שמופיעה יש עיצוב צל לאלמנט image, והחלק הפנימי יש class בשם no-boxshadow שלאחריו יש &, הוא מציין שאנחנו פונים ל image שיש לו class אבא בשם no-boxshadow.
דוגמת הכתיבה ב less:
.image{
      box-shadow: 0 0 10px #000;
      .no-boxshadow &{outline:#222 solid 3px;}
}
הרינדור של ספריית less, יתן את אותה תוצאה מאחורי הקלעים
דוגמת תוצאת הרינדור :
.image{box-shadow: 0 0 10px #000;}
.no-boxshadow .image {outline:#222 solid 3px;}



לסיכום
Modernizr היא ספריית javascript המאפשרת לנו להשתמש בצורה מושכלת ביכולות החדשות של CSS3 ו HTML5, ע"י שימוש ב API נוח לשימוש, המאפשר לנו לכתוב קוד נקיא וברור יותר.

זהוא! מקווה שנהניתם, ואשמח שתטקבקו, במידה ואתם אוהבים את ה tutorials שאני כותב, אשמח שתצטרפו לרשימת הקוראים של בפייסבוק ע"י לחיצה על לייק כאן

תודה,
אלעד שכטר

מאמרים/tutorial קשורים

מילות מפתח: ספריית JS, לימוד Modernizr,modenizr tutorial, כלי פיתוח ל CSS3 ו HTML5, Modernizer עם ספריית less.