Usando PNG con transparencias en Internet Explorer 6 (primera parte)

20.7.08. Por ooscarr (ooscarr)
No a Internet Explorer

¿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:

También hay otra solución (aparte de estas) nueva que aparece al final del siguiente video (en inglés):

5 Easy Ways to Tackle IE6’s Transparency Issues
Ir a la página del video para descargar los archivos de los ejemplos

Y eso que no mencionan la solución con flash...

Continuará...

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: , , ,

Deja de usar iframes

28.6.08. Por ooscarr (ooscarr)
Maten a Internet Explorer

Ustedes saben. Los frames y los iframes desaparecieron de la especificación XHTML a partir del XHTML 1.1. Entonces, si necesitamos embebeer contenido de otra página en la nuestra, ¿cómo lo haremos?

Si es sólo por presentación, usa CSS

Si quieres poner un iframe sólo para que se vea la barrita de desplazamiento dentro de la página, deberías usar hojas de estilo como en el bloque de noticias como aparece en la siguiente página:

Para lograr ese efecto sin usar iframes, primero encerramos la parte que queremos en, digamos, un <div>:

<div id="extras">Esto después debería lucir como si
estuviera dentro de un viejo iframe</div>

Y para que se vea con la barrita de desplazamiento, le aplicamos el estilo overflow, por ejemplo:

#extras{
 height : 230px;
 width : 200px;
 overflow : auto;
}

Si es muy necesario cambiar su contenido sin actualizar la página, podrías usar métodos javascripts como el XML HTTP Request.

Un objeto HTML

Si es necesario usar el viejo iframe, existe la solución de usar un objeto de tipo HTML embebido dentro de la página.

Por ejemplo, a continuación debería aparecer un pequeño convertidor de divisas:

No se pudo mostrar el convertidor de divisas en esta página. Visita finance.google.com.
Prueba presionando el botón Convert.

Éste es el código:

<object type="text/html"
data="http://finance.google.com/finance/converter?
from=USD&amp;to=CLP&amp;auto=1"
width="400" height="150"
style="border:1px solid #000;">
 No se pudo mostrar el convertidor de divisas en esta página.
 Visita <a href="http://finance.google.com/finance?q=usdclp"
  rel="external">finance.google.com</a>.
</object>

Internet Explorer

Lo anterior no funciona en Internet Explorer. En vez de mostrar un formulario para convertir divisas, sólo apareció el objeto con una página en blanco.

Internet Explorer preguntando si deseo ejecutar código externo
Internet Explorer cree que todos los object son elementos ActiveX. :-/

Internet Explorer bloquea el contenido embebido de otros dominios (incluso entre subdominios distintos), excepto si el HTML se está ejecutando bajo localhost. Según ellos, por razones de seguridad, y puede ser que estén en lo correcto en tratar a este objeto como un elemento independiente... Hmm... Los desarrolladores también dijeron que puede ser que eliminen esta restricción en futuras versiones beta de Internet Explorer 8. Esperemos.

Resultado de Acid2 mirror en Internet Explorer 8
Esta es la razón por la que IE8 pasa el Acid2 test desde www.webstandards.org y no desde acidtests.org, ni desde webstandards.org (sin las www).

Así que el método de objetos sólo funcionará para páginas del mismo dominio bajo Internet Explorer.

Internet Explorer además muestra unas extrañas barras de desplazamiento y un borde cuando incrustamos objetos HTML. Para deshacernos de éstos, hay que definir los siguientes estilos dentro de las páginas a embeber:

html {
 overflow: auto;
 border: none;
}

No se pudo mostrar el hola, mundo.
Se debería ver en Internet Explorer.

Internet Explorer, adicionalmente, no reconoce que un link dentro de la página incluida tiene a la página que la contiene como su _parent. Prueba haciendo click en el botón XHTML 1.0 que está dentro del objeto anterior y compara dónde se abre la página. Así que sumemos motivos para odiar a IE.

Pruebas en otros navegadores

Una página francesa hizo la prueba en los navegadores más populares de su época la manera en que cargan este y otros tipos de objetos, y estos fueron sus resultados:

User AgentResultado
Fuente: http://joliclic.free.fr
Firefox 1.5success
Firefox 1.0.7success
Opera 9success
Konqueror 3.5.2success
Safari 2.0.4success
IE 7RC1success
IE 6success
IE 5.5success
IE 5.0.1success
IE 4.0.1success
IE Mac 5.2.3success
Lynx 2.8.5degrade correctly

Yo le agregaría

User AgentResultado
Firefox 2.0.0.14success
Firefox 3success
IE8 beta 1success
Opera 9.5success
Safari 3.1.1success
iPhone 1Gsuccess

Al usar este método de objeto, también desaparece el soporte de abrir un link directamente dentro del objeto desde afuera como se podía hacer antiguamente con los iframes a través del desechado atributo target.

XFrames?

El tercer método no lo sabemos. Así como el W3C desechó los formularios con <form> en favor de los Xforms, a partir del XHTML 1.1 los frames ya no son soportados en favor de los Xframes.

Xframes es una redefinición de los framesets, que permite definir el contenido de los frames desde la URI para así no echar a perder el botón de retroceso o las direcciones guardadas en marcadores, además de facilitar el trabajo de los buscadores. Pero nada se dejó como alternativa al pobre iframe, por ahora.

En resumen

Evita usar iframes. Aparte de que son inseguros, pasados de moda y próximamente obsoletos; lo más recomendable es programar la forma de reusar código en un lenguaje de programación interpretado en el servidor.

Pero si hay que usar iframes,

  1. Si el contenido es del mismo dominio y no se cambiará desde la página contenedora, el objeto HTML debería ser la solución.
  2. Si se desea cambiar el contenido de las páginas incluidas, las llamadas javascript HTTP Request (em, como AJAX) podrían ser una alternativa.
  3. Si se desea incluir contenido externo sin olvidar a Internet Explorer, no quedará otra que seguir usando iframes (con algún DOCTYPE antiguo o transicional). O utilizar los comentarios especiales <!--[if IE]> e <!--[if !IE]> <--> como lo he hecho en mi recién inaugurado formulario de comentarios.

Referencias

Artículos relacionados

Etiquetas: , ,

Acid Tests

30.5.08. Por ooscarr (ooscarr)

Tanto en Linux como en Mac OS X es posible correr versiones antiguas de Internet Explorer simultáneamente con la ayuda de ies4linux e ies4mac (ya no es simultáneo), respectivamente, que están basados en el sistema para correr aplicaciones de Windows wine. Para otros programas, es posible la virtualización de todo el sistema o procesador (más adelante ahondaré en eso, a medida que las tecnologías se desarrollen).

Así están ls navegadores hoy en día. Más razones para NO USAR INTERNET EXPLORER. O por último si actualizaras a Internet Explorer 7, este blog se vería un poco más decente.

Acid1

Acid1
Ya todos pasan el acid1 (menos los viejos Internet Explorers).

Haz el Acid1 test

Acid2

Acid2
Ya todos muestran la carita feliz del Acid2 en Mac OS X
Y cuando salgan Internet Explorer 8 y Mozilla Firefox 3, ellos también.
¿Pero y el iPhone noooo? ¿Y Opera Mobile sí?

Haz el Acid2 test

Acid3

Acid3
Webkit y una versión interna de Opera superan el acid3.
Esperemos que Mozilla Firefox 3 también lo supere.
Digamos que por ahora Webkit lleva Acid3 a Linux.

Haz el Acid3 test

Etiquetas: , , , ,

Publicidad