Forzar IE a mostrar transparencia alpha en PNGs

Bastante sabido es de los problemas de IE a la hora de lidiar con la transparencia alpha de los archivos PNG.

Sucede que hasta la versión 6 de IE, el navegador no era capaz de mostrar correctamente la transparencia, mostrando un frustrante fondo de color gris en su lugar.

La solución recae en la utilización del famoso filtro AlphaImageLoader.

Veamos un ejemplo de la declaración de estilos en una CSS de lo que entienden los navegadores como la gente:


#logo_transparente{
background:url('png_transparente.png'); width:150px; height:55px;
}


Si viéramos la página que incluye a la CSS en IE tendríamos el mencionado problema, por lo que la solución es declarar en la stylesheet exclusiva para IE lo siguiente.


/* ESTO ES LA VERSIÓN PARA IE */

#logo_transparente{
background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_transparente', sizingMethod='scale');
}


Listo! De forma sencilla hemos sobreescrito el estilo de nuestra CSS principal para que nuestro querido IE entienda lo que queremos hacer: un PNG transparente!

Múltiples versiones de Internet Explorer a la vez

Recientemente me he topado con la necesidad de tener varias versiones de Internet Explorer corriendo a la vez.

Sucede que no era tan sencillo lograr esto como lo es ahora gracias a Multiple IE

Este software permite de forma más que sencilla correr un instalador que nos permitirá instalar aquellas versiones de Internet Explorer que nos interesen en particular para testear. La lista comprende:

• IE 3.0
• IE 4.0
• IE 5.0
• IE 5.5
• IE 6.0

NOTA: El instalador está hecho para Windows XP.

Cómo diría el amigo "Kike" Echevarría:

"Sencillamente notable"

Aquí les dejo el enlace para descargar Multiple IE.

Saludos y que lo disfruten!

CSSVista, aplicación para diseñar sitios para Internet Explorer y Firefox

Otra herramienta de esas que prometen mucho.

La gente de Litmus Labs, liberó una herramienta que puede ser de gran ayuda para los diseñadores web.

Se trata de CSSVista, la cual permite trabajar en forma simultánea editando la css de nuestro sitio siendo posible hacerlo "en vivo", y viendo simultáneamente como va quedando en Internet Explorer a la vez que en Firefox.

Por si alguno se pregunta "¿Para que quiero yo esto si con la firebug me alcanza y sobra?", van aquí una lista de argumentos:

• Esta aplicación permite a diferencia de firebug visualizar el sitio en dos vistas, una para Internet Explorer y la otra para Firefox, de modo que al ir creando los estilos para tu css puedes ver "en tiempo real". Firebug solo permite esto para Firefox.
  
• Es una aplicación que corre sola, de modo que solamente debes instalarla en tu equipo, y en principio solamente está disponible para windows y en una versión bastante preliminar lo cual puede traer acarreado algún problema de visualización (no es 100% fiable).
  
• Al igual que Firebug, es completamente gratuita.
  

Para aquellos más profesionales y con mayor poder adquisitivo, la empresa comercializa Litmus
que permite de manera sencilla y rápida visualizar tu sitio en 12 navegadores populares y detectar los bugs que hubieren en la css.

Para aquellos que no tienen windows como sistema operativo, pueden usar como alternativa la IE tab que es una extensión para Internet Explorer que permite ver dentro de Firefox una instancia de Internet Explorer con nuestra página.

Alpha, transparencia crossbrowser? Es posible en forma sencilla?

La respuesta es si!

Y por cierto es sencillo, simplemente bastará con crear la clase css a la cual queremos darle la "capacidad" de verse transparente o translúcida, y escribir esto:

.transparent{
opacity: 0.7;
/* Esto lo entiende nuestro "amigo" Internet Explorer */
filter: Alpha(opacity=70);
}

En este caso suponemos que queremos crear una transparencia del 70%.

La primera línea será "comprendida" por Firefox, ópera, etc., mientras que la segunda solamente Internet Explorer. De esta sencilla forma logramos compatibilidad con ambos mundos (firefox/internet explorer) sin mayores dolores de cabeza.