En un proyecto que estaba realizando me encontré con los ya conocidos problemas de la propiedad opacity en CSS.
Cada navegador (como de costumbre) tiene su forma de entender esta propiedad. Analizaremos las distintas interpretaciones y una solución estándar, a la vez que válida para cualquiera de los casos.
El caso especial de Internet Explorer
Ya por norma general, el navegador de microsoft es el más «raro» de todos. El necesita usar un comando filter que se encarga en este caso de filtrar el grado de opacidad.
filter:alpha(opacity=20);
Opera, Firefox y navegadores basados en Gecko
Estos hacen uso de la instrucción: -moz-opacity
El estándar
Es la propiedad opacity, tal cual -como debe ser-. El problema es que pertenece a CSS 3 y actualmente estamos inmersos en CSS 2 el cual no lo soporta todavía. Esto provoca que al validar nuestra hoja de estilo nos devuelva un error al respecto.
A pesar de ello, algunos navegadores ya se han adelantado a la especificación, e interpretan correctamente la propiedad opacity, es el caso por ejemplo de Firefox 2 y las últimas versiones de Opera.
Que los navegadores se adelanten a la especificación no me parece mal, de heho empujan al mercado (y esto en cierto modo es bueno). Pero debemos tener en cuenta que nuestra hoja de estilo sigue siendo CSS2 y por tanto NO válida.
Solución alternativa válida
Una solución que a mi parecer (y en determinados casos) me parece muy elegante es la que he implementando para el proyecto en el que estoy trabajando.
- Creamos una imagen con un tamaño de 1*1pix.
- Pintamos la capa de la imagen con el color que deseemos.
- Jugamos con el factor de opacidad en nuestra aplicación de retoque gráfico.
- Escogemos el formato gráfico PNG24, que será idoneo para llevar el efecto de opacidad a la Web.
Internet explorer tiene algunos fallos conocidos e incompatibilidades con este formato. En cualquier caso para lo que buscamos será perfectamente válido para prácticamente todos los navegador (incluido el de la discordia).
Ya solo queda indicar en la hoja de estilo que usaremos un fondo con la imagen que acabamos de diseñar. Esta imagen será la encargada de hacer realidad nuestro efecto de opacidad.
background: url(opacity.png) repeat;
Indicamos el atributo repeat para que se repita tanto en el eje de coordenadas X como Y. Facilitando la no dependencia de la imagen al tamaño del contenedor.
Y ahora si que podemos decir que tenemos una hoja de estilos válida, al igual que funciona de la misma manera para los navegadores más comunes tanto en el presente como en el futuro.
