אחד הנושאים המסובכים והמעיקים ביותר על בוני האתרים המודרניים, הוא התאימות לאחור עבור הדפדפנים. אינטרנט אקספלורר עדיין שולט, אם כי פיירפוקס נוגס לאט לאט בנתח השוק שלו, ומהווה אלטרנטיבה טובה יותר, אמינה יותר ובטוחה יותר. תוכלו לקרוא על זה בכתבה על פיירפוקס שכתבתי.
אחד מהנושאים שיש לתת להם תאימות לאחור הוא נושא תמונות ה PNG. פורמט זה מאפשר שימוש באלמנט alpha שהוא נותן את השקיפות, שכל כך פופולארית היום בתחום העיצוב. מה לעשות, שבמייקרוסופט לא חשבו על פתרון לפורמט זה, ועד היום, כל מי שמשתמש ב IE6 (שזה יותר מ 50 % מהגולשים ) לא יכול להנות מתכונה זו, אלא אם נעשתה ע"י בונה האתר פעולה לטובת העניין.
בחיפושי ברשת חיפשתי פתרון קל ונוח, עדיף עם כמה שפחות סיבוכיות, שיאפשר הצגת תמונות PNG בדפדפן IE6. ומצאתי. את קטע הקוד הבא (JS) יש להוסיף לתחילת קובץ ה index.php, בין תגי ה <head>, </head>:
<!–[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;"
+ imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod=’scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]–>
אם תוסיפו קטע קוד זה, תמונות ה PNG שלכם תקבלנה בחזרה את השקיפות שלהן (הרקע האפור/כחול שהיה ייעלם) בדפדפן IE6. פתרון נוסף שנוגע להגדרת Classes הוצע ע"י מתי קוצ'ן, בשרשור הזה.
אשמח לקבל תגובות…