השימוש בHTML5 בדפדפנים הלא מודרניים
 

היי,

שמעתי שHTML5 לא נתמך בחלק מן הדפדפנים, אבל אני שם לב שהמון אתרים נבנים איתו.

לדוגמה השימוש ב header, footer, section, doctype, meta charset לא לסגור תגיות וכו'..

אני יודע לבנות אתרים באמצעות HTML5 אבל קצת לא מבין את העניין של התמיכה בדפדפנים.

אם אני אבנה אתר ובוא נגיד אני ישתמש בmeta charset doctype וכו' הפשוטים, זה יהיה נתמך בכל הדפדפנים?

תודה :)

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

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

נכון יהיה לומר שדפדפנים ישנים (כאלה שנוצרו לפני שהתקן או יותר נכון הטיוטה שלו נכתב/ה) לא תומכים בתכונות החדשות שמציע HTML5:
החל מתגיות סמנטיות חדשות כגון header, footer, section, article וכו', המשך בצורות החדשות להגדרת encoding, קטעי סקריפט ו-CSS וסיים ב-html5 js api (כלומר web storage, geo-location, video, audio, canvas וכו').

אנו בתור מפתח צד קדמי, front end developers, ה-FED-ים, בוני האתרים, מפתחי web (תקראו לעצמם איך שתרצו) אחראים לא לשבור את האינטרנט.
כשאני נעבוד על אתר היום, יהיה נכון לפתח ב-doctype של html5 וכן להשתמש בכלים שהזכרתי לעיל.
עם זאת, חשוב יהיה לוודא שדפדפנים ישנים יותר יודעים להתמודד עם התוכן ולהציג אותו ברמת התמיכה שנגדיר לעצמו.
כלומר, "נלמד" את הדפדפנים הישנים את התגיות הסמנטיות החדשות ונגדיר להם כיצד להתייחס אליהם. עיקר הבעיה היא שדפדפנים בברירת המחדל שלהם מתייחסים לתגיות שהם לא מכירים כאל inline elements, בעוד שהרבה מהתגיות הסמנטיות החדשות הן block elements.
נוכל לעשות זאת באמצעות modernizr (או פרויקטים דומים נוספים, או אפילו לבד בקלות).

נושא נוסף שנצטרך להתמודד איתו הוא חוסר התמיכה של הדפדפנים החדשים בתכונות כמו audio, video וכו'. זאת נוכל לעשות באמצעות polyfills מתאימים שידאגו לכך שהיוזר יוכל בכל זאת לראות את הוידאו או לשמוע את האודיו (לדוגמה באמצעות קישור לויודאו או לאודיו במקום הצגתו בעמוד או לחילופין באמצעות תוספי צד ג' כמו פלאש, activex-ים וכו').

כמו כן, בנושאים כמו geo-locatio, web storage וכו', נצטרך להתמודד בצורה אחרת. לדוגמה, אם הדפדפן של המשתמש לא תומך ב-webstorage, אנו נוכל אולי להשען על עוגיות או על השרת המרוחק לשמירת המידע שנצטרך. לכל פתרון יש את היתרונות והחסרונות שלו.

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

אז הכוונה שלך היא שצריך להתאים את עצמו לדפדפנים הישנים באמצעות JS \ CSS ?

לפי רמת התמיכה שתחליט עליה.

לדוגמה קח את העמוד הזה שבנינו בנטקראפט לפני מספר חודשים:
http://netcraft.co.il/ball-and-butto...ers/index.html

פה אומנם בעיקר ניתן לראות את רמת התמיכה המדורגת מבחינת CSS:
דפדפנים מיושנים (IE8 לדוגמה) שלא תומכים בפינות מעוגלות מקבלים פינות מרבועות. חווית הגלישה לא נפגעת. משהו נוסף זה css transitions - אם הדפדפן לא תומך בהן (IE9 ומטה), אז לא תהיה אנימציה והדפדפן מיד יקפוץ לסופה (תעבור עם העכבר על הזוכים בתחרות).
אם היינו מחליטים שהאנימציות חשובות לנו עד כדי כך שגם גולשים ב-IE9 ומטה צריכים לחוות אותן, היינו עושים איזשהו תנאי עם מודרניזר שבודק אם יש תמיכה ב- css transitions ואם אין, אז מממשים בדיוק את אותה ההתנהגות באמצעות JS. חשוב לשים לב שלא לממש את ההתנהגות הזאת עם JS, כי הגישה הזאת פשוט שגויה. אין סיבה שדפדפן מודרני יעבוד קשה יותר והיוזר יקבל חווית משתמש פחות טובה בגלל תמיכה בדפדפנים מיושנים.

ישנן עוד דוגמאות רבות פה באותו העמוד. זוהי צורת העבודה הנכונה.

באופן עקרוני- כדאי לך לעבוד על אתר כאילו הוא תומך לגמרי ב-HTML5 וב-CSS3.
כיום המודעות היא לא כמו לפני 3-4 שנים. כיום הדפדפנים דיי מעודכנים, ורובם תומכים בתקנים החדשים.
ומי שלא? זבשל"ו.

אגב, אתה לא צריך לדאוג יותר מידי..
את ההתאמה כמה סקריפטים קטנים יעשו לך אוטומאטית.
google for: html5shiv, prefixfree, sass, selectivizr, modernizr

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

ממליץ לקרא על progressive enhancement וגם על graceful degradation

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

כמו IE9 ? לא נראה לי שאתה יכול להגיד את זה ללקוח.

graceful degration לIE8 ומעלה.
פיירפוקס וכרום גרסאות אחרונות.

זה הסטנדרט שלי, ועד היום לא נתקלתי בבעיות.