אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » IE Hacks

IE Hacks

רן בר-זיק מרץ 29, 2009 5:39 pm אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
בניית אתרי אינטרנט מידע למפתחים
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד