CSS Filters, Não funcionando (firefox, IE)

[reebr 94]

Estou tentando usar o blur e o grayscale em imagens na minha págin a com os filtros do css.

Funciona somente no Chome... o que estou fazendo de errado?

 

<div class = 'image style-blur'></div>  
<div class = 'image style-gray'></div>

.style-blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

.style-gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
}

 

Link: http://jsfiddle.net/Su8J2/

[Maujor 144]

A propriedade filter das CSS é suportada apenas pelo navegador Chrome.
Consulte http://caniuse.com/css-filters

[reebr 94]

Obrigado pela informação Maujor.

Contornei o problema da seguinte forma (para quem quiser saber):

 

GRAYSCALE:

.gray {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

 

BLUR:

.blur {
    filter: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPGZpbHRlciBpZD0iYmx1ciI+DQoJCTxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjMiIC8+DQoJPC9maWx0ZXI+DQo8L3N2Zz4=#blur);
}

 

RESULTADO: http://jsfiddle.net/rnxn/am8Wu/1/

[ Provavelmente isso deve detonar o desempenho do site, mas é mais para estudos =) ]