IE Hacks

כשהאתר נראה על הפנים באינטרנט אקספלורר לפעמים חייבים להשתמש ב-IE Hacks.

רן בר-זיק
מרץ 29, 2009
קטגוריה: פתרונות ומאמרים על פיתוח אינטרנט
תגיות: בניית אתרי אינטרנט, מידע למפתחים

מעודכן גם לאינטרנט אקספלורר 8. לאינטרנט אקספלורר 9 אין נכון לעכשיו האקים וגם הצורך בהאקים באינטרנט אקספלורר 9 פחת מאד.

באופן עקרוני, אני די שונא להשתמש ב-IE Hacks. מדובר בשיפצורים קטנים ב-CSS שנעשים במיוחד עבור הדפדפן אינטרנט אקספלורר. כידוע לכל מפתח אינטרנט ששווה משהו, אינטרנט אקספלורר הוא דפדפן איום ונורא בנוגע לתקנים ויש לו פרשנויות משלו בנוגע לחלק גדול מהתגיות ב-CSS. הרבה פעמים עיצוב שנראה נהדר בשועל האש, בכרום, בספארי וגם באופרה נראה זוועה באינטרנט אקספלורר 6 או 7. כיוון שמדובר בדפדפני האינטרנט הפופולריים אנו צריכים להשקיע זמן רב בהתאמה לאינטרנט אקספלורר.

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

לא תמיד יש לנו את הלוקסוס להכין CSS אחיד. לפעמים לוח הזמנים צפוף ולוחץ והזמן המוקדש לפרויקט עתיד להסתיים. ישנן כמה דרכים ליצירת Hacks – הפרדה (לעתים חלקית) בין CSS המוקדשים לדפדפני האינטרנט הנורמלים לאינטרנט אקספלורר.

הדרך הנכונה לעשות זאת היא באמצעות תגית שמיקרוסופט עצמה ממליצה להשתמש בה:


<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="ie.css" />< ![endif]-->

כשאינטרנט אקספלורר ייגש אל ie.css כמובן שבו תוכלו לכתוב תגיות והוראות הנוגעות אך ורק לאקספלורר. חשוב להקפיד על הסדר של ה-CSSים. ה-CSS הראשי יהיה קודם וזה של אינטרנט אקספלורר יהיה אחרי כן. שימו לב שאם אתם משתמשים ב-Multiple IE עלולים להיות כמה בעיות באבחון ה-user agent.

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

אינטרנט אקספלורר 6


.text {
	width: 12px;
	*width: 14px;
}

אינטרנט אקספלורר 7


.text {
	width: 12px;
	*+width: 14px;
}

אינטרנט אקספלורר 8


.text {
	width: 12px;
	width: 14px
.text {
	width: 12px;
	width: 14px\0/;
}

/;
}

כולם ביחד:


.color {color: #777;} /* for all browsers */
* html .color {color: #C39;} /* for IE6 */
*+html .color {color: #66F;} /* for IE7 */
.color {color: #0FC
.color {color: #777;} /* for all browsers */
* html .color {color: #C39;} /* for IE6 */
*+html .color {color: #66F;} /* for IE7 */
.color {color: #0FC\0/;} /* for IE8, going last */

/;} /* for IE8, going last */

שימו לב שמדובר בפתרון נלוז ולא תקני, עדיף מאד להשתמש ב-conditional comments.