"/>

טעינה מותנית של קובץ CSS לאקספלורר

אני מניח שאין מי שמפתח אתרים או אפליקציות אינטרנט שלא נתקל בבעיות שונות עם אינטרנט אקספלורר (Internet Explorer). העובדה שמיקרוסופט לאורך שנים רבות התעלמה מהסטנדרטים השונים באינטרנט יצרה דפדפן "מפלצת", מגודל ומאותגר סטנדרטים, שנדמה שהוא כמעט "נהנה" למרר את חייהם של מפתחים. עובדה זו מחייבת אותנו פעמים רבות ליצור עבור דפדפן זה קובץ CSS מיוחד היודע לטפל בבעיות המיוחדות שהוא יוצר.

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

טעינת קובץ CSS חיצוני המותאם במיוחד לאינטרנט אקספלורר

הדרך המומלצת לטעינת קובץ CSS חיצוני לדף היא על ידי שימוש בתג <link>. בדרך כלל ימוקם תג זה בין תחילת התג <head> לסופו.

דוגמה לשימוש בתג <link>

בדוגמה הבאה נטען לדף קובץ CSS חיצוני ששמו . style. קובץ זה ייטען לדף בכל סוגי הדפדפנים המובילים:

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

דוגמה לטעינת קובץ CSS חיצוני המיוחד רק לאינטרנט אקספלורר

הטכניקה לטעינת קובץ CSS מיוחד לאינטרנט אקספלורר היא על ידי שימוש בתג מסוג הערה. לתוך תג זה נכניס את התג <link> עם הקישור לקובץ המיוחד לאקספלורר. בראש התג נכניס קוד מיוחד היוצר את ההתניה (בירוק בדוגמה למטה):

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

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

טעינת קבצי CSS עבור גרסאות שונות של אינטרנט אקספלורר

שיטה זו של טעינה מותנית של קובץ CSS לאקספלורר אינה מוגבלת רק לסוג הדפדפן אלא גם לגרסאותיו השונות. בדוגמה הבאה למשל נגדיר קובץ CSS חיצוני עבור אינטרנט אקספלורר 7 בלבד:

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

בדוגמה למעלה אנו מתנים (בירוק) את טעינת קובץ ה - CSS לאינטרנט אקספלורר 7.אם היינו רוצים לטעון קובץ המותאם לאקספלורר 6 היינו עושים זאת באותו האופן רק שבתוך התנאי היינו מגדירים את המספר 6. קוד זה היה נראה כך:

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

טעינת קבצי CSS עבור מספר גרסאות של אינטרנט אקספלורר אך לא עבור אחרות

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

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-lower-style.css">
<![endif]-->

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

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

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-higher-style.css">
<![endif]-->

האותיות gt שבתוך התנאי בדוגמה שלנו הן קיצור של greater then - ובתרגום לעברית גדול מ. פירוש התנאי כולו הוא שיש לטעון את הקובץ במקרה שמדובר בדפדפן אקספלורר שגרסתו גדולה מגרסה 7.

טעינת קובץ CSS חיצוני עבור כל הדפדפנים מלבד אינטרנט אקספלורר

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

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

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

כלים ומאמרים בנושא

איך נוסיף קוד CSS לדף HTML

התג link ב - HTML

קישורים ב - HTML

התג header ב - HTML

החלפה דינמית של קובץ CSS בזמן ריצה


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש