פיתוח אתרי HTML5 מודרניים עם Modernizr

25 ביולי 2011

4 comments

Modernizr מודרנייזרבזמן שפיתוח אתרים מודרניים העושים שימוש במגוון יכולות של HTML5, CSS3 ו- JavaScript API’s חדשים הולך וצובר תאוצה, עלינו להתמודד עם בעיית התאימות למגוון גירסאות הדפדפנים שנמצאים בשימוש אצל המשתמשים. כיוון שכל דפדפן תומך באלמנטים אחרים של הסטנדרטים המתקדמים באופן טיפה שונה וקצב שונה, עלינו לדעת אילו יכולות עומדות לרשות המשתמש שלנו בדפדפן בו הוא משתמש כדי להציג לו את האתר ולאפשר לו להינות ממנו.

Modernizr מודרנייזר

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 הוסיפו לפרוייקט.

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 לאלמנט הראשי של הדף.

מבט זריז בכלי הפיתוח של הדפדפן, יראה לנו את התמונה הבאה:

Modernizr מודרנייזר

הספרייה הוסיפה 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 בעיות:

  1. יש שימוש ב- Vendor Prefix (כגון moz- ו- webkit-) שגורם לשכפול הגדרת העיצוב מספר פעמים.
  2. אין טיפול במצב בו אין לדפדפן תמיכה ב- 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
>
  1. הספרייה מבטלת את הצורך ב- Vendor Prefix ומאפשרת להשתמש בהגדרה בודדת ללא קידומת. הספרייה דואגת להגדרה המתאימה הנדרשת לכל הדפדפנים התומכים.
  2. מאחר והספרייה מוסיפה את ה- CSS Classes המתאימים למצב תמיכה או אי תמיכה ביכולת, אנחנו יכולים לתת הגדרות עיצוב ל- 2 המצבים, ועבור מצב בו הדפדפן לא תומך בתכונה לתת עיצוב חלופי (למשל, לממש את הרקע באמצעות תמונה).

Modernizr מודרנייזר

נסו להריץ את הדוגמא עצמכם וראו איך היא מוצגת על הדפדפן שלכם.

שימוש 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 מודרנייזרModernizr מודרנייזר

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

Modernizr מודרנייזרModernizr מודרנייזר

ע”י הוספת השימוש ב- Modernizr לדף, מבוצע קוד JavaScript שמייצר את התגיות הסמנטיות האלה ב- DOM ועוזר לדפדפנים הישנים להתמודד איתם בצורה טובה יותר. בנוסף, העיצובים ששמנו על התגיות הסמנטיות יעבדו.

Modernizr מודרנייזרModernizr מודרנייזר

סיכום

Modernizr מאפשרת לנו להשתמש במרכיבים של HTML5, CSS3 ו- JavaScripts API’s מודרניים כדי לבנות אפליקציות חדשניות, לזהות בצורה קלה אילו תכונות נתמכות בדפדפן של המשתמש ולתת את הטיפול המתאים.

תהנו!

Add comment
facebook linkedin twitter email

4 comments

  1. ען25 ביולי 2011 ב 17:04

    קוד מתאים בהתאם?

    אה! כמו סוד מוחלט בהחלט!!

  2. יוסי27 ביולי 2011 ב 13:16

    גיא שלום,

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

  3. יניב24 בנובמבר 2011 ב 17:08

    היי גיא,
    ניסיתי להפעיל את הדוגמא של הפינות המעוגלות בדפדפן
    firefox 3.6
    ונראה שגירסה זו של הדפדפן לא מכירה את התגית
    border-radius
    עדיין יש צורך להשתמש בתחילת
    -MOZ

    השאלה מדוע
    Modernizr
    אינו דואג ליישום התחילית כפי שציינת.

    תודה

  4. גיא בורשטיין29 בנובמבר 2011 ב 13:52

    יניב, אני לא יודע להתייחס לנושא התאימות של החבילה לפיירפוקס.

Comments are closed.