Registrar en JS si se admite una propiedad CSS

Quiero comprobar si la propiedad CSS pointer-events (see documentation) es compatible con el navegador del usuario.Registrar en JS si se admite una propiedad CSS

Actualmente, por ejemplo, no es compatible con Opera y creo que algunas versiones de IE.

Me gustaría ejecutar un cheque en JavaScript y mostrar bits apropiados de HTML dependiendo de si es compatible o no.

¿Hay una mejor manera de hacerlo que verificando la cadena de agente de usuario?

Fuente

2011-08-31 Richard

Normalmente, usted verifica qué es el agente de usuario y de eso sabe lo que es o no es compatible. – Endophage

@Endophage: Normalmente, no haces eso. [Detección de funciones] (http://api.jquery.com/jQuery.support/) es el enfoque superior. Aunque en el caso de 'pointer-events', no hay una prueba confiable. – thirtydot

@thirtydot la detección de funciones está bien si solo hay un par de cosas interesantes que desea hacer. Si tiene muchas funciones para detectar, diga todo en Modernizer, es ineficiente. – Endophage

creo

if ("pointer-events" in document.body.style)

if ("pointerEvents" in document.body.style)

debe ser adecuada en el caso de contenido SVG.

Fuente

2011-08-31 21:29:17 Knu

Esto [se evalúa como verdadero] (http://jsfiddle.net/M27PT/) aún [no funciona según lo previsto] (http://jsfiddle.net/7TvVY/10/) en IE9. – Artyom

@art eso es probablemente porque [IE9 no extendió esta propiedad SVG] (http://msdn.microsoft.com/en-us/library/ff972269 (v = vs.85) .aspx) al contenido HTML. – Knu

Parece que es al revés en Firefox: su declaración devuelve falso, sin embargo, el CSS funciona según lo previsto. – Artyom

Lo siguiente se considera verdadera en tanto IE 9 y Firefox:

if ('pointerEvents' in document.documentElement.style)

Fuente

2011-08-31 21:32:55 clarkb86

Y en Opera, que definitivamente no lo admite como propiedad de HTML, así que me temo que no va a funcionar. – Richard

esto no es una respuesta, pero es verdad – taseenb

de contenido no SVG este script debería funcionar:
https://github.com/ausi/Feature-detection-technique-for-pointer-events

También puede utilizarlo sin Modernizr:

var pointerEventsSupported = (function(){ 
    var element = document.createElement('x'), 
     documentElement = document.documentElement, 
     getComputedStyle = window.getComputedStyle, 
     supports; 
    if(!('pointerEvents' in element.style)){ 
     return false; 
    } 
    element.style.pointerEvents = 'auto'; 
    element.style.pointerEvents = 'x'; 
    documentElement.appendChild(element); 
    supports = getComputedStyle && 
     getComputedStyle(element, '').pointerEvents === 'auto'; 
    documentElement.removeChild(element); 
    return !!supports; 
})(); 
if(pointerEventsSupported){ 
    // do something 
}

Fuente

2012-01-17 16:50:24 ausi

¡Maravilloso! ¡Gracias por publicar esto! –

@SerjSagan Ahora también está incluido en los detectores no centrales de Modernizr. Puede ir a http://modernizr.com/download/ y activar css-pointerevents en los no-core detecta si desea usar Modernizr. – ausi

Registrar en JS si se admite una propiedad CSS

Respuesta

Cuestiones relacionadas