¿Por qué las transparencias de las imágenes PNG no se ven en Internet Explorer 6 y qué puedo hacer para que se vean bien? Todavía hay mucha gente que no ha actualizado a Internet Explorer 7, o deshabilitaron el WindowsUpdate, o todavía no pasan ni a Windows XP. No sé.
Primero pensé: Al diablo con IE6. Pero hay veces en que necesito que las cosas funcionen en Internet Explorer 6, y los otros formatos no me dejan cambiar de posición las imágenes o el color de fondo sin tener que generarlas de nuevo y es muy complicado andar reproduciendo fondos con capas y un montón de marimañas más. Necesito definir una solución para este problema.
Por medio de javascripts
DirectX
Suena descabellado, pero el truco más famoso es el del javascript (el famoso pngfix.js) que arregla por medio de un estilo propietario de Microsoft el problema (AlphaImageLoader). También se puede aplicar sin necesidad de javascripts con el estilo CSS no estándar:
img{
background-image: url(pildora.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src="pildora.png");
}
Este código lo que hace es dibujar una segunda superficie en el mismo espacio que ocupa el elemento y cargar el PNG ahí
. Con DirectX.
Pero este código tiene sus problemas y limitaciones, como no funcionar en versiones anteriores a Internet Explorer 5.5, no poder usar mapas de imágenes (existe otro javascript para mapas de imágenes), no funciona con listas (hay otro javascript para listas), tampoco con fondos (otro javascript), ni rollovers (otro), consume muchos recursos hasta el punto de ¡bloquear algunos formularios y deshabilitar ciertos links!
SuperSleight
El mismo desarrollador del javascript anterior menciona otro javascript más completo SuperSleight que, traduciendo, tiene las siguientes ventajas:
- Funciona tanto con imágenes
inline como de fondo, reemplazando la necesidad de los javascripts sleight y bgsleight -
Automáticamente aplicará
position: relative a los vínculos y campos de formulario si no tienen ya una posición ajustada. (Puede ser deshabilitado.) -
Puede ser ejecutado en todo el documento, o sólo una parte seleccionada donde tú sabes que están los PNGs. Esto es mejor para el rendimiento.
-
Detecta imágenes de fondo ajustadas como
no-repeat y ajusta el scaleMode para recortar en vez de escalar. -
Puede ser re-aplicado por cualquier otro JavaScript en la página — útil si ha sido cargado nuevo contenido mediante una petición AJAX.
El javascript en cuestión se puede descargar desde 24 ways y viene con un archivo GIF transparente x.gif que utiliza para hacer todo el truco.
Para implementarlo, basta incluir el llamado al javascript dentro del <head></head> dentro de comentarios condicionales para Internet Explorer menores o iguales a la versión 6:
<!--[if lt IE 7]>
<script type="text/javascript"
src="supersleight-min.js"></script>
<![endif]-->
Yo lo uso, pero no incluye solución para los fondos que se repiten o están posicionados. Así que restringí su funcionamiento para esta columna (<div id="content">) solamente descomentando la penúltima línea del javascript de la siguiente forma:
// limit to part of the page ... pass an ID to limitTo:
supersleight.limitTo('content');
HTC
Después, en wikipedia encontré otra solución. Esta vez sí es compatible con imágenes, con listas ¡y hasta con fondos repetidos y posicionados al mismo tiempo!
En cada elemento que queramos usarlo, el truco es el siguiente, por ejemplo:
img {
behavior: url(/js/fx-iepngfix.htc);
}
#header {
padding-bottom:31px;
background:transparent url(IMAGENAME.png) 0% 100% no-repeat;
behavior: url(/js/fx-iepngfix.htc);
}
ul li {
padding-left: 11px;
background-image: url(IMAGENAME.png);
background-repeat: no-repeat;
background-position: 0% 5px;
behavior: url(/js/fx-iepngfix.htc);
}
Por supuesto, la propiedad CSS no estándar "behavior" sólo existe en Internet Explorer (es una de las Microsoft Windows Script Technologies) y el archivo HTC (con licencia BSD, MIT y LGPL, al igual que el iepngfix.htc del que está basado) se puede descargar desde la página de fx-iepngfix.htc.
Se podría crear un javascript que agregue esta propiedad a todos los elementos que lo necesiten y luego llamamos a dicho javascript desde comentarios condicionales. Puede ser... Hm... ¡Oh! ¡Dicho y hecho! ¡Alguien más ha logrado esta solución definitiva!
Otras librerías
En Google code existe un proyecto que intenta arreglar éste y otros problemas de Internet Explorer a través de un javascript. Se trata de IE7.js e IE8.js. El primero arregla y ajusta las versiones anteriores de Internet Explorer para que se comporte como Internet Explorer 7; y el segundo,
mejora también a Internet Explorer 7 para que incluya arreglos que no alcanzaron a integrarse en él. Todavía no soporta los fondos repetidos o posicionados. :-(
Soluciones como estas vienen integradas en la mayoría de las librerías javascript como:
Incluídas en frameworks y CMSs como
Y eso que no menciono la solución con flash...
Siento que me he alargado demasiado con este –al principio simple– post. Existen otras técnicas que solucionan todos estos problemas más fácilmente y directo al hueso, que no revelaré hasta la próxima entrada.
Referencias
Artículos relacionados
Etiquetas: css, ie, javascript, tutorial
20.7.08.
0 comentarios
