כתיבת קוד HTML שיבוצע רק באינטרנט אקספלורר

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

הפיתרון דרש את הכנסת קוד הCSS הבא כאשר הדף נצפה בIE, בלי לבצע שום שינוי כאשר הוא נצפה בדפדפנים אחרים

html > body .entry ul {
    list-style: circle;
    }

#sidebar ul li.page_item {
    list-style: circle inside;
   }

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

הסימון מתצע על ידי שימוש בתחילת הערה בסיגנון הבא <!–[if סוג תנאי IE גירסא]> כאשר סוג התנאי יכול להיות קטן (lt), קטן או שווה (lte), גדול (gt), או גדול או שווה (gte) והגירסא היא גירסת הדפדפן הספציפית שאליה מתיחס התנאי.

לדוגמא להכנסת הקוד הקודם כך שיתבצע רק בIE6 וIE7 (מתוך תקוה עזה שIE8 כבר יתמוך בתכונות הCSS הרלבנטיות) יראה כך

<!--[if lte IE 7]>
<style type="text/css" media="screen">
html > body .entry ul {
	list-style: circle;
	}

#sidebar ul li.page_item {
	list-style: circle inside;
	}
</style>
<![endif]-->

התיעוד המלא של הטכניקה מהאתר של מיקרוסופט.

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

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים