אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » modernizr – ספריית JavaScript ל-HTML 5

modernizr – ספריית JavaScript ל-HTML 5

רן בר-זיק יוני 15, 2010 7:28 am 3 תגובות

פתרון מעולה ל fallback ל-HTML 5 ומאפשר פיתוח בתקן החדש כבר היום

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

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

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

בדיוק בשביל זה קיימת modernizr – ספריה קטנה, נוחה וקלה לשימוש שבודקת באופן פרטני את התמיכה בכל אלמנט של HTML 5. בניגוד ל-browser sniffing שבו אנו בודקים את הדפדפן והגרסה שלו, modernizr מספקת אובייקט בשם Modernizr שבו יש מידע על כל האלמנטים החדשים של HTML 5. ה-modernizr מספקת sniffing גם באמצעות JavaScript וגם באמצעות CSS (כן, כן ואני מייד אסביר).

modernizr ב-JavaScript

הכי טוב להדגים הבה ונניח שיש לי אלמנט canvas חביב שכל מה שיש בו זה ריבוע כחול. הקוד המלא הוא:


<!-- Canvas HTML element -->
<canvas id="myCanvas"></canvas>

<script type="text/javascript">
/* JavaScript API for Canvas */
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
if (context) {
    context.fillStyle = '#00f';
    context.fillRect(0, 0, 150, 100);
}
</script>

אם אנחנו נשים את הקוד הזה ככתבו וכלשונו, בדפדפן מודרני כמו פיירפוקס, אופרה, כרום, ספארי וכו' אנו נראה ריבוע כחול. אך אם אני אגלוש עם אינטרנט אקספלורר 6, 7 או 8, אני לא אראה דבר ואז מה יעזור לי ה-HTML 5 המגניב? בדיוק בשביל זה אני אשתמש ב-modernizr על מנת שיקפיץ לי alert אם הדפדפן שלי לא תומך ב-Canvas. בין אם מדובר באינטרנט אקספלורר ובין אם מדובר בגרסה ישנה של פיירפוקס:


<script type="text/javascript" src="/internet_files/html5/modernizr-1.1.min.js"></script> 
<!-- Canvas HTML element -->
<canvas id="myCanvas"></canvas>

<script type="text/javascript">
/* JavaScript API for Canvas */
if (Modernizr.canvas) {
    var elem = document.getElementById('myCanvas');
    var context = elem.getContext('2d');
    if (context) {
        context.fillStyle = '#00f';
        context.fillRect(0, 0, 150, 100);
    }
}
else {
    alert("hey! You don't have Canvas!");
}

מה שעשינו הוא להכניס את קובץ המקור של modernizr (שוקל כקילובייט אחד) על מנת שאובייקט modernizr יהיה זמין עבורנו ואז לשאול את אובייקט modernizr אם תכונת Canvas קיימת אצלו. במידה וכן, אז הדפדפן תומך ב-canvas. במידה ולא, אנו נקפיץ alert. כאשר אנחנו יכולים כמובן לעשות כל פעולה ולא רק להריץ alert.

והנה הדוגמא החיה:

כל התכונות של אובייקט נמצאות בדוקומנטציה של modernizr.

modernizr ב-CSS

modernizr דואגת להכניס class באלמנט ה-html שבו יש את כל התכונות. כך למשל, אם הדפדפן שלי תומך ב-canvas, תהיה לי class של canvas. במידה ואין תמיכה כזו, תהיה לי class של .no-canvas. כך גם בנוגע לכל התכונות. ברגע שיש לי modernizr בדף, יש לי שפע של classים באלמנט ה-html שיסייעו לי ליצור fallbacks ב-CSS. רוצים דוגמא? הפעילו את ה-Firebug שלכם ותסתכלו על אלמנט ה-html של הדף:

צילום מסך של firebug שמראה לנו את התכונות שנוספו ל-html באמצעות modernizr

בדוקומנטציה יש את מלוא התגיות של CSS.

modernizr ואלמנטים סמנטיים ב-HTML 5

ב-HTML 5 יש שפע של אלמנטים סמנטיים שאפשר להשתמש בהם. אך אליה וקוץ בה, אינטרנט אקספלורר (6,7 ו-8) לא מכירים באלמנטים הסמנטיים באלו. modernizr אחראית גם לזה ומחליפה את ה-section, header, footer וחבריהם ב-div בדפדפני האקספלורר החביבים. מעכשיו אפשר להשתמש בחלק הסמנטי של HTML 5 בלי בעיות מיוחדות.

סיכום

modernizr הוא ספרית JavaScript קטנה וחשובה שמאפשרת את הפיתוח ל-HTML 5 כבר היום. אנו יכולים להתחיל לפתח ל-HTML 5 עם fallbacks לבעלי דפדפנים מיושנים.

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

3 תגובות

  1. מיכאל הגב פברואר 10, 2016 בשעה 11:35 am

    הי,
    ברצוני לשאול אותך לגבי flexbox+modernizr. בעבודה שלי אנו צריכים לתמוך(עדיין ;( ) ב-IE8 שכידוע לא תומך ב-flexbox, בניתי דף HTML עם שימוש בו,אבל אני לא יכול להקפיץ אלרט שהדפדפן שלו לא תומך.האם יש דרך ע"י modernizr לגרום ל-IE8 'להבין' את ה-flexbox?
    תודה.

    • רן בר-זיק הגב פברואר 10, 2016 בשעה 7:41 pm

      לא השתמשתי בהם מעולם באופן אישי, אבל:
      https://github.com/doctyper/flexie
      https://github.com/10up/flexibility
      אם אתה שואל אותי? לא כדאי, זה יכביד מאוד על הדף ועל הדפדפן המסכן שגם ככה לא מרנדר JS הכי טוב.

  2. משתמש אנונימי (לא מזוהה) הגב אוגוסט 17, 2020 בשעה 2:57 pm

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

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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