אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery למתקדמים » שימוש ב-Modernizr ל-Feature Detection

שימוש ב-Modernizr ל-Feature Detection

רן בר-זיק מאי 26, 2013 8:19 am אין תגובות

כיצד אנו משתמשים בספרית Modernizr ל-Feature detection ומשתמשים בו כתשתית לבדיקות.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר הקודם הסברתי והדגמתי על Feature Detection והסברתי איך משתמשים בו. הדוגמאות שהבאתי היו דוגמאות פרטניות: כלומר היה עלי לכתוב בדיקה עבור כל פיצ'ר שאני משתמש בו. עבור חלק גדל והולך מהמתכנתים (אם לא כולם) הצורך לכתוב בדיקה ידנית עבור כל פיצ'ר מתייתר עקב השימוש הנפוץ בספריה קטנה ואיכותית בשם Modernizr. במאמר הזה אני אסביר על Modernizr וכיצד משתמשים בה.

באופן עקרוני, כמו כל ספריה, ההתקנה של Modernizr באתר/אפליקציה שלכם הוא קל ופשוט. מורידים את הקובץ מהאתר של Modernizr – כאשר בתחילה אפשר להסתפק בקובץ הפיתוח שמכיל את כל הבדיקות. המשקל שלו הוא מינורי גם כך. אחרי כן, אנו מכניסים את הקובץ ל-Head – אחרי ה-JavaScript. (למה ב-Head? כדי למנוע הבהוב בדפדפנים ישנים שמסתמכים על פיצ'ר HTML5Shiv, יותר מידע – בהמשך).

Modernizr עושה כמה דברים עבורנו:

1. בדיקות אוטומטיות – הוא בודק סט שלם של פיצ'רים (כ-30 במספר).
2. נותן לנו API ליצירת בדיקות לפיצ'רים משלנוץ
2. מכניס את HTML5Shiv – שזו ספריה קטנה נוספת שכלולה בתוך Modernizr והיא ממירה את האלמנטים הסמנטיים של HTML5 לאלמנטים שאקספלורר מגרסה 8 ומטה מסוגל להתמודד איתם.

בנוגע לבדיקות האוטומטיות – Modernizr כוללת בדיקות אוטומטיות לכמה פיצ'רים ידועים. היא מבצעת את הדיקות האלו ונותנת לנו גישה לתוצאות בשתי דרכים. הדרך הראשונה היא באמצעות CSS (כן, כן). איך זה קורה? הספריה מכניסה לנו classים של CSS לתגית ה-HTML שכוללים את התכונות הקיימות של הדפדפן. למשל, אם הדפדפן תומך ב-audio, אני אראה class בשם audio ב-HTML. הנה צילום מסך שמבהיר את זה:

CSS classes made by Modernizr
CSS classes made by Modernizr

ואם אתם לא מאמינים לי, אתם יכולים לפתוח את FireBug\Chrome Dev Tool ולראות בעצמכם בעמוד הזה.

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


if(Modernizr.canvas== true) {
console.log('Canvas is activated!');
} 

עד כאן זה פשוט וגם הרחבתי על זה במאמר נוסף שכתבתי על Canvas ובו דיברתי גם על HTML5Shiv. אבל עוד דבר חזק מאד אצל Modernizr הוא מתן התשתית לכתיבת בדיקות משלנו לכל פיצ'ר שהוא, לא רק הפיצ'רים שנמצאים ב-core.

כתיבת בדיקה ב-Modernizr

בואו ונניח ואני רוצה לבדוק תמיכה בפיצ'ר track. למי שלא מכיר, מדובר ביכולת להציג תרגום כחלק אינטגרלי מאלמנט video. למי שלא מכיר את track – יש הרצאה שלי בנעשתה במסגרת HTML5Fest ששם אני מדבר על זה. הבדיקה הזו, נכון לשעת כתיבת המאמר, לא קיימת ב-Modernizr. באיזו בדיקה נשתמש על מנת לבדוק אם track קיים? פשוט ניצור אלמנט Video ונשתמש במתודה של addTextTrack – אם המתודה לא קיימת אז נקבל undefined, אם אין אלמנט וידאו (כלומר הדפדפן כל כך עתיק שהוא לא תומך אפילו ב-video) אז נקבל גם כן undefined. הבדיקה נראית כך:


function isTrackSupported() {
  var video = document.createElement('video');
  return typeof video.addTextTrack === 'function'
}

עד כאן, כל מי שקרא את המאמר האחרון צריך להבין את הקוד ואת מטרתו. איך כותבים את הבדיקה הזו באמצעות Modernizr?


Modernizr.addTest('track', function(){
  var video = document.createElement('video');
  return typeof video.addTextTrack === 'function'
});

הקוד הוא פשוט מאד, אנו משתמשים במתודת addTest שמקבלת שני פרמטרים: הראשון הוא שם הבדיקה (מאד חיוני להמשך) והשני הוא פשוט פונקציה אנונימית שכוללת את הבדיקה שלנו ומחזירה true או false או כל תוצאה אחרת שתרצו. ברגע שהשתמשנו במתודה, הבדיקה תרוץ. כיצד ניגש לתוצאות? מאד פשוט – באמצעות אובייקט Modernizr! איך קראתי לבדיקה שלי? במקרה הזה track – אז הגישה לתוצאה תהיה באמצעות Modernizr.track – למשל:


if (Modernizr.track == true) {
   console.log('Track is enabled!');
}

זה כמובן הרבה יותר נוח מיצירת פונקציות בדיקה גלובליות משלנו – כך בעצם Modernizr הופכת לתשתית Feature detection שתשמש אותנו באופן בלעדי.

במאמר הבא אנו נמשיך לדבר על מה שאנו מסוגלים לעשות עם Modernizr.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
Feature detection בדיקות ג'אווה סקריפט ו-jQuery באתרי אינטרנט תשתית

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד