Estudio Lázaro

El comportamiento de la propiedad opacity en CSS está comenzando ser algo más homogeneo… y no echemos las campanas al vuelo.

Antes era tan nefasta la implementación que Mozilla y derivados utilizaban un sintáxis CSS propia (WTF!) e IE ni lo soportaba. Después IE pasó a soportarlo con una sintáxis también propia y sui generis.

Ahora parece que comienza extenderse la sintáis estandar de CSS: opacity: X.X; dondeX.X es un numérico que puede ir desde 1.0 a 0.0.

Aún así, la mejor práctica hoy en dia aunque no sea la más estandar es incluir tres líneas en tus CSS para que todos los navegadores puedan presetar la transparecencia:

• opacity: 0.40;
• filter:alpha(opacity=40);
• moz-opacity:0.4;

La primera es la sintáxis estandar CSS, la segunda para navegadores de la familia Mozilla, (en especial con motores de renderización más viejos por que los más recientes se supone que entienden la sintáxis estandar) y la última para IE.

El problema de las transparencias con IE no acaba ahí. Estamos rediseñando el sitio de www.benavent.org y las transparencias desaparecieron en IE. Nos hemos vuelto locos pero lo hemos encontrado.

Como dice uno de nuestros mottos seguro que no eres el primero en tener ese problema y así era, como podeis leer IE6 opacity filter caveat IE necesita algo más… requiere que los elementos tengan cierto ancho (width) y alto (height) específico.

Dicho y hecho, las transparencias han vuelto, de hecho hemos añadido un simple width: 100%; a la clase y resuleto, dado que la clase es hija de otra y aunque redundante no le duele decirlo que ocupe todo su ancho disponible.