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

Feature Detection

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

הסבר על כתיבת בדיקות לבחינת תמיכה של דפדפנים שונים בפיצ'רים שונים ומשונים

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

במאמר הקודם, כתבתי על Browser Detection – והסברתי למה לא להשתמש בו. הדרך המודרנית לפענח האם הדפדפן שלי מספיק מודרני על מנת להפעיל תכונה כלשהי היא בבדיקת התכונה ולא סוג הדפדפן. במקום לבדוק אם הדפדפן שלי הוא כרום, או פיירפוקס, או אקספלורר מגרסה 9 או 10, לא כדאי לבדוק אם הפיצ'ר שאני רוצה לבדוק עובד וזהו? כך אם יהיה בעתיד דפדפן בשם 'רן', זה לא יזיז לסקריפט שלנו – כל עוד הדפדפן העתידי הזה יתמוך בפיצ'ר שאני צריך.

אני אדגים עם דוגמה – נניח והאפליקציה שלי צריכה תמיכה בפיצ'ר של HTML5 שנקרא video. אני יודע בוודאות שמי שלא תומך בה הוא אקספלורר 7 ו-8, אבל כיוון שאני משתמש ב-Feature detection, אני פשוט אבדוק אם הדפדפן שלי תומך באלמנט וידאו ובמידה ולא: אני אעשה פעולה כלשהי.

איך עושים את זה? נורא פשוט – בואו וננסה לבדוק אם מתודה פשוטה של אלמנט הוידאו עובדת – אם היא עובדת, סימן שהדפדפן תומך באלמנט הזה. אם היא לא קיימת, סימן שהדפדפן לא יכול לנגן את הוידאו. המתודה הפשוטה ביותר שקיימת לתגית video היא play. לפיכך הבדיקה תהיה משהו כזה:


var testObject = document.createElement('video'); 
if(testObject.play() == undefined) {
console.log('video is supported');
} 

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

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

קוד יותר אלגנטי יהיה משהו כזה:


function supports_video() {
  return !!document.createElement('video').play;
}

זו פונקציה שלחלק מכם תהיה קצת פחות אינטואטיבית בגלל שני סימני הקריאה. אבל מה שהיא עושה זה בדיוק את אותו הדבר – בדיקה אם המתודה פעילה על אלמנט פיקטיבי שאני יוצר. שני סימני השאלה משמשים פשוט להחזר תוצאה בוליאנית (true או false) ודאית. בכל פעם שאני אקרא לפונקציה אני אקבל true או false. במידה ואני אקבל false, אני אוכל להציג הודעה מנומסת לגולש שמסבירה לו על המצב. (לא ב-alert! בחייאת! אנחנו לא בשנות ה-90 ואנחנו לא בממשלה!) – או להציג לו גרסה אחרת של האתר.

אפשר להשתמש בזה לעוד דברים, כך למשל, אני אנסה לכתוב מבחן לבדוק אם תכונת CSS בשם Style קיימת לדפדפן. בדפדפנים מודרניים? זה קיים. בדפדפנים ישנים יותר? לא. איך אני עושה את זה? כל תכונות ה-CSS נמצאות תחת document.body.style ואתם יכולים לראות את זה בקונסולה. למשל:

מציאת attribute לאובייקט דרך הקונסולה

זו בדיקה שערכתי בכרום, פשוט פתחתי את הקונסולה, הקלדתי document.body.style וההשלמה האוטומטית הראתה לי את כל תכונות האובייקט.

אם הדפדפן תומך ב-transitions, אז התכונה document.body.style.transition תהיה באופן ודאי – איך אבדוק אם היא קיימת? פשוט לבדוק אם היא יוצא undefined או משהו אחר. אם היא יוצאת undefined אז סימן שהיא לא קיימת ואז הדפדפן לא תומך בכך. איך בודקים? עם typeof באופן הבא:


if(typeof(document.body.style.transition) == 'undefined') {
    console.log('Transition is not supported');
}

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

במאמר הבא, אני אסביר איך להשתמש ב-Modernizr כדי למנוע מאיתנו את הצורך בכתיבת כמה וכמה בדיקות.

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

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