IE Hacks

מעודכן גם לאינטרנט אקספלורר 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\0/;
}

כולם ביחד:


.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 */

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

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)


אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.