Finalmente dí con la solución final a mis problemas de soporte de transparencias de PNG para IE6. Este tema es otro en los que más usuarios entran a CSSLab buscando por soluciones reales. En mi [anterior artículo][1] sobre este mismo tema, la solución es real pero su implementación se torna complicada de adaptar en cualquier ámbito de sus proyectos.

Últimamente he logrado probar e implementar 2 soluciones diferentes para solucionar este drama que nos reúne. Ambas se implementan mediante Javascript y necesitan de leves retoques para funcionar (no se frustren si no se ve a la primera, basta con pensar denuevo cómo están las estructuras de tus archivos y colocar adecuadamente las rutas).

Twinhelix PNG Fix v2⌗

Esta segunda versión está de lujo y me hizo volver a creer en el trabajo de Twinhelix. Lo que hace esto es a través de un behavior agrega soporte casi-nativo del canal alpha de PNG para IE5.5+ sin tener que hacer cambios en el documento HTML. Otras ventajas:

  • Conversión configurable de elementos PNG.
  • Soporta para imágenes llamadas a través de la etiqueta HTML y mediante la propiedad CSS background-image.
  • Soporta la repetición del background mediante background-repeat.
  • Las imágenes pueden ser llamadas dentro del mismo documento o mediante hojas de estilos externas.
  • Soporta cambios de estado de la imagen mediante CSS o Javascript.
  • Soporta links que sean llamados en capas superiores a la del PNG transparente.
  • Muy pequeño y liviano.
  • Gratis.

Modo de uso:⌗

  1. Copiar iepngfix.htc y blank.gif a la estructura de tu sitio.

  2. Copiar esta sencilla línea de código CSS que define en cuáles elementos el .htc hará que las imágenes soporten transparencia. Ten cuidado de llamar a la ruta del .htc correctamente: 

    img, div { behavior: url(iepngfix.htc) }

  3. Ten el cuidado de además entregar la ruta correcta en iepngfix.htc en que tienes el blank.gif. Te recomiendo en esta hacerlo de forma absoluta: 

    var blankImg = ‘/imagenes/blank.gif’;

  4. Eso es. Cuando termines todo eso deberías de ver algo similar al ejemplo 1.

[Ver ejemplo 1 (con IE6, claro).][2]{.verejemplo}

Bajar Twinhelix IEPNGFix v2

Unit PNG Fix⌗

Irrumpió en la web hace muy poco y la está rompiendo. Este método se aplica mediante el llamado de un Javascript, el que al igual que el anterior lee un archivo clear.gif y lo aplica a los PNG’s haciéndolos transparentes para IE6. Su plus es que pesa sólo 1kb y para su implementación sólo se requiere llamar el .js. Claro que se debe tener el cuidado de aplicar las rutas, tanto del .js como del .gif correctamente. Puedes llamar el unitpngfix.js mediante comentarios condicionales, de la siguiente manera:

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

En la primera línea de código del unitpngfix.js, debes configurar la ruta desde dónde llamar clear.gif, y nuevamente recomiendo que sea absolutamente:

var clear="/imagenes/clear.gif"

Y ya. Si seteaste bien las rutas, deberías de ver algo similar al ejemplo 2.

[Ver ejemplo 2 (con IE6, insisto).][3]{.verejemplo}

Bajar Unit PNG Fix

Y: ¿Cuál es mejor? Hasta ahora, ambas me han funcionado perfecto, por lo que les dejo a uds. definir su favorito.

[1]: http://www.csslab.cl/2006/08/14/pngs-transparentes-en-ie6/ “Enlace en CSSLab a “PNG’s transparentes en IE6"” [2]: http://www.csslab.cl/ejemplos/png_2/twinhelix.html “Enlace en CSSLab a “PNG’s transparentes para IE6: Ejemplo Twinhelix”” [3]: http://www.csslab.cl/ejemplos/png_2/unitpng.html “Enlace en CSSLab a “PNG’s transparentes para IE6: Ejemplo Unit PNG Fix””