Transparencia en imagenes PNG con IExplorer 6

A pesar de los deseos de todos aquellos que hacemos sitios web, el internet explorer 6 sigue vivo y resistiendo los esfuerzos por jubilarlo.

Así es como muchas veces terminamos perdiendo mucho tiempo para lograr que los sitios web desarrollados sean interpretados correctamente por este navegador.

Entre otros tantos problemas que provocaba esta versión estaba el manejo de las imagenes en formato PNG con transparencia. Ya que al no ser interpretadas correctamente, se muestran con un fondo gris y completamente opaco.

Afortunadamente, desde la versión 7 en adelante, los archivos PNG se interpretan correctamente. Y ahora, gracias a esta gran solución de la gente de TwinHelix, podemos hacer que nuestros sitios sean compatibles hacia atrás (con versiones 6 o anteriores de Ie).

En esta oportunidad, una solución rápida, sencilla y limpia para permitir la transparencia en imagenes PNG con IExplorer 6 y anteriores. Así podemos deshacernos definitivamente del formato GIF (con su bajísima calidad y sus bordes recortados). De los Hacks de CSS y de los eternos agregados de javascript.

Desde el sitio de TwinHelix se puede conseguir la última versión del archivo necesario para corregir este problema en Internet explorer. Es recomendable descargarlo desde ahí ya que lo actualizan continuamente.

El archivo en cuestión es el iepngfix.htc. Contiene las instrucciones para agregar compatibilidad con imágenes PNG «casi nativa» a las versiones antiguas del internet explorer sin tener que modificar el código HTML.

Cómo funciona?

• Solamente es necesario llevar los archivos iepngfix.htc y blank.gif a la estructura de nuestro sitio web.
• Luego hay que copiar y pegar este código dentro del HTML que llame a las imágenes con transparencia o dentro de la hoja de estilos Css:

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

1. Los selectores CSS que contengan las imágenes PNG (img, div, span, etc) se agregan separados por coma (,) y la ruta de la url es relativa al documento que la llama y no a la hoja de estilos.
2. En el caso que la imagen blank.gif  se encuentre en algún subdirectorio hay que indicarlo en la línea 16 del archivo iepngfix.htc de la siguiente forma:

IEPNGFix.blankImg = '/imagenes/blank.gif';

Con la última actualización de este script, vienen muchas opciones para agregar compatibilidad a las versiones de CSS1 background-repeat y background-position. El uso de todas las opciones está muy bien explicado en la ayuda. Por eso es recomendable siempre descargar la última versión y leer los ejemplos que vienen incluidos.

Descargar Demo

Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.

Y si quieres ganar algo de dinero sin esfuerzo, registrate en IPRoyal desde este banner y recibí 1 dolar de regalo al comenzar a usar la aplicación para generar ingresos pasivos.

Acá puedes conocer más sobre ingresos pasivos, que es y como funciona IPRoyal Pawns.