Este es un tema que ya hemos tocado en otras ocasiones en DesarrolloLibre:

• Filtros en CSS3.
• El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos.

Sin embargo resulta interesante y necesario saber cómo utilizar esta Técnica de Procesamiento Digital de Imágenes en múltiples navegadores incluyendo al infame Internet Explorer.

Como casi siempre en el Desarrollo Web; Internet Explorer es un caso particular, DX filter es empleada desde Internet Explorer 5.5, dejándolo de lado en conjunto con muchas otras convenciones propietarias y utilizando CSS3 como alternativa a partir de Interner Explorer 9; lamentablemente Internet Explorer no posee un buen soporte de CSS3 así que resulta verdaderamente molesto lograr un simple filtro como este el Internet Explorar; si se deseara llevar el efecto Blur a las versiones modernas tuviéramos que emplear alguna API JavaScript que realice el trabajo o emplear en Canvas.

El CSS para el efecto Blur

.blur { 
-webkit-filter: blur(3px); 
-moz-filter: blur(3px); 
-o-filter: blur(3px); 
-ms-filter: blur(3px); 
filter: blur(3px); 
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}

Son utilizados los prefijos de los navegadores web más utilizados:

• -webkit para Google Chrome y Safari.
• -moz para Mozilla Firefox.
• -o para Opera.
• -ms para Internet Explorer (Aun sin soporte).

.blur { 
-webkit-filter: blur(3px); 
-moz-filter: blur(3px); 
-o-filter: blur(3px); 
-ms-filter: blur(3px); 

También es empleado el filter para versiones viejas de Internet Explorer.

Soporte para versiones antiguas de Internet Explorer

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

El archivo SVG para Firefox

Por último en el código CSS anterior, incluimos un archivo SVG; pero, ¿Qué son estos archivos?

Los SVG los podemos definir cómo (tomando un estrato de la Documentación oficial de Firefox): "Gráficos Vectoriales Escalables (SVG por sus siglas en ingles) es un lenguaje de marcado XML para describir gráficos vectoriales en dos dimensiones. Básicamente, es a los gráficos lo qué XHTML es al texto. SVG ha sido expresamente diseñado para trabajar conjuntamente con otros estándares del W3C tales como CSS, DOM y SMIL."

Algunas versiones de Firefox no incorporan el uso de los filtros inclusive empleando el prefijo -moz; por lo tanto definimos un SVG para hacer el trabajo:

filter: url(blur.svg#blur);

El cuerpo del archivo:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg> 

Enlaces de interés

• Artículo original.
• Soporte de los filtros en los navegadores web más utilizados.