הכרות עם Html5shiv

Alonisser ,07/02/2012

כולנו רוצים להשתמש כבר היום בhtml5, למשל בתגיות הסמנטיות החדשות שנכנסו איתו כמו :header, footer,nav,article,figure,section וכו'. שימוש בתגיות סמנטיות יותר הופך את הדף שלנו לקריא יותר למנועי חיפוש כמו גם לקוראי מסך שאינם דפדפנים. אנחנו גם יודעים שכרגע יש ילד קול בסן פרנסיסקו, או מהנדסת מבריקה בהודו שעובדת על הדבר הגדול הבא שמשתמש באלמנטים הסמנטיים האלו והופך את האתר שלכם לוואו. אתם יכולים לדמיין את השיחה מהלקוח ההוא:תגיד, יש אצלנו את הhtml5 הזה שכולם מדברים עליו?  בקיצור כדאי להתחיל להשתמש באלמנטים הסמנטיים החדשים.

אבל.. מסתבר שיש בעיה - דפדפנים מיושנים יחסית כמו IE8 (וכל הIE שלפניו) , תחזיקו חזק, לא יודעים ליישם עיצוב css על אלמנטים כאלו, או אפילו לאפשר להם אלמנטים בנים. מבחינת הIE8 הוא עושה לנו טובה שהוא בכלל מציג את הדף עם האלמנטים <bla> , מבחינת הדפדפן  זה מה שהם: <bla bla> והוא לא אמור להתייחס אליהם..

שביזות ודכאון למפתחי הרשת ו html5 semantics נכנסים להקפאה עמוקה.או ש..

על הפתרון עלה במקרה מפתח בשם Sjoerd Visscher. שפרסם בהערת שוליים בדף ויקי של ארגון הw3c שעסק בנושא משפט בסגנון:

"דרך אגב, אם אתם רוצים להחיל כללי css על אלמנטים שIE לא מכיר אתם יכולים להריץ:

document.createElement(elementName);

וזה איכשהוא גורם לדפדפן להכיר את האלמנט ולאפשר את העיצוב שלו"

אבל מי שתרגם את התגלית הזו לתובנה שמאפשרת שימוש באלמנטים סמנטיים של html5 גם עם דפדפנים ישנים היה Jeremy Resig הבלתי נלאה. האיש שמאחורי jQuery וגאון Js פרסם למחרת ההערה בבלוג שלו פוסט, שניסח בעצם את הפתרון תוך שימוש בתגלית של Visscher והמשיג את הhtml5shiv. ג'רמי הציע סקריפט פשוט שיריץ לולאה שתיצור עם createElement את האלמנטים החדשים של html5 (ומייד תמחוק אותם) ובכך תאפשר לדפדפן בעצם להכיר אותם ולעצב אותם. את הסקריפט הזה צריך לעטוף בconditional comment שתפעיל אותו רק עם IE מתחת לגרסה מסויימת ו.. וואלה - הבעיה נפתרה.

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

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

הסיפור המלא מסופר ע"י פול אייריש כאן.

פוסט זה מפורסם כחלק מהתרומה שלנו לmovethewebforward.

תגובה