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

מזה Modernizr

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

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

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

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

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

דוגמא

טעינת הדף ובדיקה שנוספו הקלאסים של Modernizr

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

צילום מסך
modernizr-demo

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

עבודה עם ה 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

דוגמא – לטיפול לדפדפן שלא תומך בצל

עבודה עם API בjavascript, שמספק לנו ה Modernizr

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

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

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

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

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

למשתמשים המשתמשים בספריית less, עקב הקינון של האלמנטים כביכול נוצרת בעיה, less נותנת פתרון נהדר, היא מאפשרת בתוך קינון אלמנטים לכתוב קריאה שמתייחסת לאלמנט אבא, וע”י כך לדעת לשמור על כתיבה מקוננת.
בדוגמא שמופיעה יש עיצוב צל לאלמנט image, והחלק הפנימי יש class בשם no-boxshadow שלאחריו יש &, הוא מציין שאנחנו פונים ל image שיש לו class אבא בשם no-boxshadow.

דוגמת הכתיבה ב less

הרינדור של ספריית less, ייתן את אותה תוצאה מאחורי הקלעים
דוגמת תוצאת הרינדור

לסיכום

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

זהוא! מקווה שנהניתם, ואשמח שתטקבקו.

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

less – ספריית CSS, על רגל אחת

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

על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.
  • כתיבת תגובה

    האימייל לא יוצג באתר. (*) שדות חובה מסומנים

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">