Webmaster Libre

Una de las “novedosas novedades” del Internet Explorer 7 es el soporte a la transparencia de los PNG, ¡por fin! No obstante, seguro que aún nos quedan algunos años de versiones anteriores que no tragan bien con las transparencias.

Para solucionar este “pequeño” inconveniente existen algunos trucos, unos sirven para unos casos , otros para otros.

Soluciones:
Con Javascript
Con filtros propietarios para Internet Explorer y CSS

Con Javascript:

Bob Osola ideó esta solución para conseguir que las imágenes PNG contenidas en las etiquetas img se representen correctamente con su transparencia.

Utilizando un comentario condicional averiguamos si el visitante utiliza alguna versión inferior a Explorer 7

<!--[if lt IE 7]>
<script defer type="text/javascript" src="png.js"></script>
<![endif]-->

y si es así cargamos el script contenido en un archivo llamado, por ejemplo, png.js

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
      }
   }
}

Como todo, esta solución tiene sus pros y contras:

Pros:

• Se ignora como un comentario en navegadores que no sean Internet Explorer
• Funciona con Doctypes estrictos y transicionales.
• No rompe con la validación del W3C
• Ligero y simple de implementar
• Funciona con estilos en linea y externos

Contras:

• No funciona en navegadores anteriores a la versión 5.5 (aunque dado que el soporte para versiones anteriores ya no existe…)
• Requiere Javascript
• No soporta las imágenes de fondo establecidas con CSS
• Se pierden las reglas de estilo aplicadas al elemento img en las imagenes PNG, se soluciona creando una clase que añadir a dichas imágenes que cumpla las mismas funciones.

  <img src="imagen.png" class="png" />

Filtros propietarios para Explorer y CSS

Cuando lo que queremos es aplicar imagenes PNG con transparencia como fondos por medio de CSS se hace nesario recurrir a filtros. Para no romper la validación de nuestro código incluiremos un comentario condicional, como el del anterior ejemplo para que, si el usuario usa Internet Explorer por debajo de la versión 7, se cargue una hoja de estilo adicional que aplique el truco.

<link href="estilo.css" rel="stylesheet" type="text/css" />
<title>Titulo de la Página</title>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="png.js"></script>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Entonces, añadimos la imagen de fondo en el CSS general

#header {
background-image: url(fondo.png);
background-repeat: no-repeat;
}

y, al archivo ie.css de la siguiente forma

#header {
background: none; /* Eliminamos el fondo cargado por el CSS general */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="fondo.png",
sizingMethod="image");/*Añadimos la imagen de fondo por medio de un filtro*/
background-repeat:no-repeat;
}

Sin duda, ninguna de las dos soluciones son lo ideal pero hacen el trabajo que, a fin de cuentas es lo que queremos ¿no?