PNGfix.js para Internet Explorer

Hasta la última versión de Internet Explorer, la 8 incluida, las imagenes en formato PNG siguen mostrandose mal. Es uno de los problemas más grandes de Internet Explorer, por que las especificaciones del formato estan estandarizadas desde hace unos 10 años y aunque han mejorado el soporte para él, el comportamiento sigue siendo risible.

Lo mejor del formato PNG es que permite transparéncias con diferentes niveles del canal alpha (la intensidad de la opacidad), al contrario que el formato GIF que sólo permite alpha 100 o alpha 0. Pero Ningúna versión de Internet Explorer funciona como debería con las opacidades:

En la versión 6 (lanzado en agosto del 2001) la transparéncia simplemente no existe y muestra la imagen con un extraño color de fondo que no he sabido adivinar de dónde sale.
En la versión 7 se muestran bien, a no ser que la imagen tenga algún tipo de tratamiento con javascript (cambio de opacidad, …).
Y la versión 8 viene a comportarse igual de mal que la 7.

En la captura de ejemplo se ve la misma imagen en los tres estados que intento describir. La primera imagen es vista con Internet Explorer 7 y 8 después de tratarla con Javascript. La segunda imagen es vista con cualquier navegador (sin contar versiones de IE anteriores a la 7). Y la tercera imagen es vista con Internet Explorer 6 (y supongo que los inferiores serán igual o peor).

Para solucionar el problema de la tercera imagen se pueden aplicar filtros especificos de Internet Explorer (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader) que corrigen el problema del color de fondo. Pero si ya es suficientemente incómodo tratar incluso las imagenes de formas diferentes según el navegador que se esté utilizando, a una mente brillante se le ocurrió la idea de hacer un tratamiento automático con Javascript, hizo un pequeño script y lo llamó PNGFix.

El uso de PNGfix es muy simple, sólo hay que guardar un archivo .js e incluirlo en el documento que se quiera corregir.

Para incluirlo se utilizan estas lineas, que lo incrustarán sólo si el navegador es inferior a Explorer 7 (por que este ya no lo necesita).

<!--[if lt IE 7]>
<mce:script defer="defer" type="text/javascript" mce_src="pngfix.js"></mce:script>
<![endif]-->

Y el archivo en cuestión (pngfix.js) debería contener algo parecido a esto:

/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   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
      }
   }
}

Explicado esto, sólo me queda alegrarme de que Digg, Facebook y Youtube hayan decidido (por fin) dejar de dar soporte a Internet explorer 6.