סגנונות מותאמים לאינטרנט אקספלורר

כל בונה אתרים נתקל בבעיות css בדפדפן אינטרנט אקספלורר לגרסאותיו. בעוד שלעיתים אפשר למצוא פתרון על ידי הוספת רוחב או zoom:1, לפעמים אין מנוס מליצור סגנונות מיוחדים לאקספלורר.

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

1. גליון עיצוב לאינטרנט אקספלורר

בשיטה זו יוצרים גליון עיצוב לכל גרסה של אקספלורר אותה רוצים לתקן. דרך קוד html מיוחד מתבצעת בדיקה האם הגולש נכנס לאתר עם אקספלורר בגרסה 8 ומטה - אם כן, הוא מקבל css בהתאם (אם יש בעיה בכל הדפדפנים מ-8 ומטה, אפשר גם להשתמש בגליון אחד לכולם - כפי שמודגם כאן עם ie.css).


<!--[if lt IE 9]><link href="css/ie.css" type="text/css"><![endif]-->
<!--[if IE 8]>  <link href="css/ie8.css" type="text/css"><![endif]-->
<!--[if IE 7]>  <link href="css/ie7.css" type="text/css"><![endif]-->
<!--[if IE 6]>  <link href="css/ie6.css" type="text/css"><![endif]-->

חסרון השיטה הוא שה-css מפוזר בכמה מסמכים, מה שיוצר את הבעיות הבאות:

  1. קשה יותר לתחזק - עלולים לשכוח לשנות את הגליון המותאם אם עושים שינויים בעיצוב האתר
  2. פוגע במהירות הטעינה של האתר - יותר קבצי css משמעותם יותר בקשות http - מה שמעכב את מהירות הטעינה באקספלורר

2. שימוש במחלקות

במקום להשתמש בגליונות עיצוב שונים לכל דפדפן. ניתן להשתמש רק בגליון עיצוב אחד, לפי השיטה של פול אייריש, בה משתמשים ב-html5 boilerplate:


<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
</html>

בטכניקה זו, מוסיפים את המחלקה לפי גרסת האקספלורר, לתגית הפותחת של ה-html. כך שאם יש לכם, למשל, תיקון שנוגע ל-div id=nav באקספלורר 7, תוכלו לכתוב את הסלקטור כך:

.ie7 #nav{
width:800px;
}

באופן דומה, אם יש לכם תיקון שנוגע לכל הדפדפנים מאקספלורר 8 ומטה, תוכלו לכתוב:

.oldie #nav{
margin:0;
}

יתרון השיטה השניה הוא חסרונה של השיטה הראשונה: איחוד כל הסגנונות במסמך אחד חוסך בבקשות http ומאפשר לרכז את כללי העיצוב המיוחדים לאקספלורר בסמוך לכללים הרגילים בקובץ ה-css הראשי.

תגיות:, ,

3 תגובות

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

    • התכוונת לשיטה השניה, אני חושב

      • כן 🙂 אופס