¿Cómo puedo detectar funciones de filtros CSS?

Question

En algunos navegadores, incluyendo Chrome estable, se puede hacer esto:

h3 { 
    -webkit-filter: grayscale(1); 
    filter: grayscale(1); 
} 

Y ¿no lo sabes, el h1 se representará por completo en escala de grises. Everything old is new again.

De todos modos, ¿alguien sabe de alguna manera de detección de características para esto?

Necesito poder aplicar otros estilos si el filtro fil no funciona.

Answer 1

los llamados ACTUALIZADO respuesta:

A medida que la OP se menciona un buen punto que estoy actualizando la respuesta, pero esto no tiene nada relacionado o se contradicen con mi respuesta anterior, esto es simplemente un navegador detección.

Alan H. mencionó que IE, antes de su décimo. versión, admite filter css propiedad, pero no en la forma en que todos sabemos al respecto (CSS3 filter me refiero).

Así que si queremos presentar detectar CSS3 filter s solamente, debemos seguir adelante y usar un pequeño navegador-detección. Como mencioné en my comments.

Utilizando la propiedad documentMode, y combinándolo con nuestro simple feature-detect, podemos excluir los llamados falsos positivos en IE.

function css3FilterFeatureDetect(enableWebkit) { 
    //As I mentioned in my comments, the only render engine which truly supports 
    //CSS3 filter is webkit. so here we fill webkit detection arg with its default 
    if(enableWebkit === undefined) { 
     enableWebkit = false; 
    } 
    //creating an element dynamically 
    el = document.createElement('div'); 
    //adding filter-blur property to it 
    el.style.cssText = (enableWebkit?'-webkit-':'') + 'filter: blur(2px)'; 
    //checking whether the style is computed or ignored 
    //And this is not because I don't understand the !! operator 
    //This is because !! is so obscure for learning purposes! :D 
    test1 = (el.style.length != 0); 
    //checking for false positives of IE 
    //I prefer Modernizr's smart method of browser detection 
    test2 = (
     document.documentMode === undefined //non-IE browsers, including ancient IEs 
     || document.documentMode > 9 //IE compatibility moe 
    ); 
    //combining test results 
    return test1 && test2; 
} 

Original Modernizr source

---

if(document.body.style.webkitFilter !== undefined) 

o

if(document.body.style.filter !== undefined) 

información adicional:

Para una simple detección de funciones, use mis códigos anteriores.Para obtener una lista de las funciones compatibles, echar un vistazo a aquí:

• Filter Effects 1.0
• Filter Effects 1.0 functions

para una demostración en vivo de filter s en Chrome, echar un vistazo a aquí:

• CSS Filter Effects

y 2 más recursos para usted:

• CSS Filter Effects Landing in WebKit
• When can I use CSS Filter Effects?

Mientras escribo esta respuesta, debe utilizar webkit proveedor de prefijo para hacer que funcione.