Detección de características para la propiedad de transición CSS3

Estaba investigando este modernizador para saber cómo comprueban si una determinada propiedad de CSS es compatible con el navegador de un usuario. Básicamente, solo quería tener una pequeña secuencia de comandos que me dijera si el navegador del usuario admite transiciones de CSS. He abstraído el código de modernización a algo como a continuación:

Elem = document.createElement('Alx'); eStyle = Elem.style; var cssProp = (function check(){ props = ["transition", "WebkitTransition", "MozTransition", "OTransition", "msTransition"]; for(var i in props) { var prop = props[i]; console.log(prop); if (!contains('-' , prop) && eStyle[prop] !== undefined ) { return prop; } } })(); /* The contains function */ function contains( str, substr ) { return !!~('' + str).indexOf(substr); } 

modernizr hace casi lo mismo, acabo de hacer algunos cambios y codificar los valores de la matriz para simplificar las cosas. El script funciona de la siguiente manera.

  • Cree un elemento html (no tiene que ser un elemento html válido).

  • ejecute un IIFE que, básicamente, pasa por todas las versiones posibles del navegador de la propiedad css y también la variante estándar de W3C. verifique si la propiedad thing se puede aplicar al elemento html que creamos, si no se puede aplicar, la condición if falla y se devuelve indefinido

  • si la condición if pasó, la propiedad compatible con css-3 correcta se devuelve y almacena en cssProps.

Solo quería saber si esta es una forma a prueba de balas de verificar qué transición es compatible con el navegador del usuario. o si es compatible en absoluto?

Este es realmente mi primer bash de detección de características del navegador y por eso quería saberlo.

Para su punto más amplio de “es esta una forma a prueba de balas de verificar qué transición es compatible con el navegador del usuario”, la respuesta es no. Si bien es casi seguro que el 99,99% de todos los navegadores lo admitan, inevitablemente habrá una combinación extraña de cosas (una vista web en un dispositivo Android Samsung de gama media que utiliza una versión personalizada de webkit / chrome es un culpable común) Eso evitará que seas realmente “a prueba de balas”.

Dicho esto, mientras que usted hizo un gran trabajo al extraer la lógica de lo que hace Modernizr, me cuestionaría su necesidad de hacerlo.

Como han mencionado otros comentaristas, siempre puedes crear una comstackción personalizada que tenga justo lo que quieres. Dicho esto, tendría sentido hacer lo que has hecho si quisieras la comstackción javascript más delgada posible (ya que Modernizr es casi seguro que tiene soporte / código para cosas que son completamente irrelevantes para lo que estás haciendo). Si ese es el caso, entonces le sugeriría que revise los posibles resultados para la transición. Es básicamente todo sin prefijo, con la excepción de Android anterior.

Eso significa que tu detección puede ser mucho, mucho más pequeña

 var supportsTransitions = function() { var style = document.documentElement.style; return 'transition' in style || 'webkitTransition' in style } 

Esto le dará resultados casi idénticos (es cierto que ignorará los navegadores antiguos; depende de usted si eso importa o no) en una huella mucho más pequeña.

De cualquier manera – ¡maravilloso comienzo en la detección de características, espero ver que contribuyas tu propio a Modernizr pronto!