IE9 Compatibility – תאימות אתרים עם IE9
מאת גיל פינק 21 בספטמבר 2010. 4 תגובות. שייך לקטגוריות פיתוח
אינטרנט אקספלורר 9, הגירסה החדשה לדפדפן הנפוץ מבית מיקרוסופט, עבר מתיחת פנים משמעותית הן בביצועים שלו, הן בתמיחה בנושאים שונים כמו תאימות לתקנים כמו CSS3, HTML5 והן בממשק שלו למשתמש. אחד הנושאים החמים כאשר מדברים על דפדפנים הוא תאימות לתקנים ולסטנדרטים. גיל פינק סוקר את נושא התקינה ב-IE9 החדש
אינטרנט אקספלורר 9, הגירסה החדשה לדפדפן הנפוץ מבית מיקרוסופט, עבר מתיחת פנים משמעותית הן בביצועים שלו, הן בתמיחה בנושאים שונים כמו תאימות לתקנים כמו CSS3, HTML5 והן בממשק שלו למשתמש. אחד הנושאים החמים כאשר מדברים על דפדפנים הוא תאימות לתקנים ולסטנדרטים. בגרסאות הקודמות של אינטרנט אקספלורר התחילה מיקרוסופט תהליך של התכנסות לכיוון התקנים הקיימים והסטנדרטים כמו למשל CSS2.1 ועוד.
תאימות או לא להיות
לפני כמה שנים, כאשר הייתי מפתח אינטרנט, אחת המשימות השנואות עליי ביותר הייתה לבדוק וליישם את תאימות הפיתוחים שלי לדפדפנים השונים וסוגי הגרסאות שלהם. מאז התקופה הזאת שבה המפתח היה נדרש לבנות תצוגת אתר עבור כל סוג של דפדפן עברו לא מעט שנים שבהן התפתחו הסטנדרטים של W3C והתמיכה בסטנדרטים הללו בתוך הדפדפנים. כיום דפדפנים שלא מתאימים עצמם לסטנדרטים אלו נחשבים נחותים יותר ובעייתיים יותר. יתרה מזאת, המפתחים מצפים שכל דפדפן יציג את דפי האינטרנט באותו האופן ויבצע את הסקריפטים הקיימים בדפים באותה הדרך. אינטרנט אקספלורר 9 נבנה עם תמיכה בתקנים הקיימים כמו לדוגמא CSS3 ו- ECMAScript 5 ובנוסף עם ראייה עתידית לתקנים שמתחילים לצבור תאוצה כמו HTML5. במבחני ACID3 שבודקים תאימות לסטנדרטים הוא מקבל ציון של 95 מתוך 100 שזה ציון גבוהה ביחס לכל גרסאות אקספלורר הקודמות:
הבעיות מתחילות כאשר בוני האתרים רוצים שהדפדפנים יתמכו גם בתקנים ישנים או בקוד ישן. כאן נכנסים לתמונה ה- Browser Mode וה- Document Mode.
מה הוא ה- Browser Mode?
ה- Browser Mode קובע מה היא מחרוזת ה- User Agent שהדפדפן שולח לשרתים ומה ברירת המחדל של ה- Document Mode. ברירת המחדל שלו באינטרנט אקספלורר 9 היא כמובן IE9 כמו שה- Browser Mode של אינטרנט אקספלורר 8 הוא IE8. בעת פיתוח האתר יכול המפתח בעזרת IE Developer Tools הקיימים באינטרנט אקספלורר 9 לשנות את ה- Browser Mode. לעומת המפתח, משתמש רגיל יכול לשנות את ה- Browser Mode כאשר הוא גולש לאתר ומפעיל את כפתור ה- Compatibility View באופן יזום. להלן סוגי ה- Browser Mode:
| Browser Mode | תיאור |
| IE9 | IE9 מעביר מחרוזת User Agent, וקטור גרסא, וDocument Mode שתואם את הסטנדרטים של IE9. |
| IE9 Compatibility View | IE9 מעביר מחרוזת User Agent, וקטור גרסא, וDocument Mode כאילו הוא כרגע IE7. בנוסף לזה הUser Agent מכיל Trident/5.0 token שמזהה שהדפדפן הוא באמת IE9. ניתן להשתמש ב- Mode הזה על מנת לבדוק איך משתמשי האתר יראו אותו כאשר הם משתמשים בכפתור ה- Compatibility View. |
| IE8 | IE9 מעביר מחרוזת User Agent, וקטור גרסא, וDocument Mode כאילו הוא כרגע IE8. |
| IE7 | IE9 מעביר מחרוזת User Agent, וקטור גרסא, וDocument Mode כאילו הוא כרגע IE7. |
מה הוא ה- Document Mode?
ה- Document Mode מכתיב באיזה אופן מנוע ה- Trident שמתרגם את ה- Markup של הדף יתרגם את הדף. להלן סוגי ה- Document Mode:
| Document Mode | תיאור |
| IE9 Standards | תמיכה בסטנדרטים ובהתנהגות שקיימים ב- IE9. ברירת המחדל עבור IE9. |
| IE8 Standards | תמיכה בסטנדרטים ובהתנהגות שקיימים ב- IE8. |
| IE7 Standards | תמיכה בסטנדרטים ובהתנהגות שקיימים ב- IE7. |
| Quirks | התנהגות זו תואמת את התרגום מסמכים אשר אינם מכילים doctype או שמכילים Quirks doctype. בהתנהגות דומה ל- IE5 ול- Quirk של IE6, IE7 ו- IE8. |
ניתן לשנות את ה- Document Mode על ידי שימוש בתגית המטא X-UA-Compatible או שימוש ב- HTTP Header בשרתים שמריצים את האתר. להלן דוגמא של שימוש בתגית המטא על מנת לאפשר תרגום או ל- IE7 או ל- IE9:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"></head><body></body></html>
בדיקת תאימות אתרים
אחרי שהבנו איך ניתן להגדיר את התאימות עבור אתר, נראה כמה הדגמות של תאימות באתרים ישראליים מוכרים. לצורך הבדיקה אני משתמש ב- IE9 Developer Tools על מנת לעבור בין תאימויות לדפדפני אקספלורר השונים. האתר הראשון שאותו אציג הוא אתר אל על. האתר מתאים לסטנדרטים של אקספלורר 7 ואקספלורר 8 וכך הוא נראה בהם:
אבל כאשר עוברים לסטנדרטים של אקספלורר 9 המצב פחות טוב וכפי שניתן לראות דף הבית מתעוות:
במקרה זה כדי יהיה למפתחי האתר להוסיף את תגית המטא X-UA-Compatible על מנת להיות תואמים לגרסאות הקודמות של אקספלורר עד שיתקנו את הבעיות.
אתר נוסף שנבדק הוא האתר של וואלה. אתר וואלה ברובו מתאים לסטנדרטים אבל כפי שניתן לראות עדיין יש קצת בעיות עם תאימות לסטנדרטים של אקספלורר 9 בחלק של ה- Footer בדף הבית:
אתר אחרון שנבדק הוא האתר של The Marker. כך הוא נראה בסטנדרטים של אקספלורר 7:
וכך הוא נראה בסטנדרטים של אקספלורר 9:
קיימות קצת בעיות שיזדקקו לתשומת לב של מפתחי האתר.
סיכום
אינטרנט אקספלורר 9 תומך ותואם את הסטנדרטים האינטרנטים הקיימים היום. בנוסף לזאת מאפשר הדפדפן לתמוך בתקנים ובמנועי תרגום של גרסאותיו הקודמות וכך מאפשר לאתרים שעדיין לא תואמים לדפדפן ולסטנדרטים שלו לעבוד במתכונת הישנה ומספק אורך רוח למפתחי האתרים על מנת להטמיע את הסטנדרטים הקיימים כיום.
גיל פינק
יועץ בכיר וארכיטקט מחברת Sela Group. ביצע בעבר תפקידי פיתוח כמתכנת בכיר, כראש צוות, כמנהל פיתוח וכיועץ בכיר. בעל תואר Microsoft MVP בנושאי Data Platform Development ובעל הסמכת MCPD. אוהב לחקור וללמוד טכנולוגיות חדשות בעיקר בתחומי עיצוב ופיתוח תשתיות.
http://blogs.microsoft.co.il/blogs/gilf
פוסטים נוספים של גיל פינק
![אילן שילוח וקבוצת The-Time משקיעים בניוזגיק [גיוס]](http://www.newsgeek.co.il/wp-content/cache/56x45/2012/04/newsgeek-thetime.jpg){kind=small}
![כיצד תרבות הסמארטפון הרסה את התרבות [דעה]](http://www.newsgeek.co.il/wp-content/cache/56x45/2012/05/4307875855_a7f604af83_o-300x225.jpg){kind=small}
אין פה טענה שהתאימות ל- HTML5 טובה יותר משל FF3 או כרום רק ש- IE9 כשייצא אמור להיות עם תאימות ל- HTML5 (כרום במבחני ACID קיבל ציון של 100 ואילו FF3 קיבל ציון של 94). הסיבה לבעיות התצוגה באתרים הנ"ל נובעת לאו דווקא מחוסר תאימות ל- HTML5 אלא לבנייה של האתרים עם חוסר תאימות לסטנדרטים הקיימים כיום.
האם ידועה בעיה עם Silverlight + WIN7
התקנתי את ה Silverlight על גבי IE9 וקיבלתי errorID=1516
האם משהו ניסה?
בברכה,
איציק
לא ידועה לי בעיה עם Silverlight + WIN7.
אני ממליץ שתעביר את הבעיה לאתר הConnect של מיקרוסופט שנמצא בכתובת http://connect.microsoft.com/IE.
שם ניתן לדווח עם תקלות בIE9.
בברכה,
גיל