¿Es posible en JavaScript saber si el navegador del cliente admite una propiedad CSS? Estoy hablando de las propiedades de rotación de CSS3. Quiero ejecutar algunas funciones solo si el navegador las admite.Comprobar el soporte de la propiedad del CSS del navegador con JavaScript?
creo que puede hacerlo de esta manera:
if ('WebkitTransform' in document.body.style
|| 'MozTransform' in document.body.style
|| 'OTransform' in document.body.style
|| 'transform' in document.body.style)
{
alert('I can Rotate!');
}
hay una nueva API DOM CSS.supports para ese propósito. FF, Opera (como supportsCSS) y Chrome Canary ya implementan este método.
Para la compatibilidad entre navegadores puede utilizar mi ejemplo CSS.supports polyfill
:
CSS.supports("display", "table");//IE<8 return false
embargo, todavía se necesita especificar el prefijo del navegador para prefijar propiedades CSS. Por ejemplo:
CSS.supports("-webkit-filter", "blur(10px)");
Sugiero a la utilización de Modernizr para la función de detección.
Puede usar la biblioteca Modernizr.
Ejemplo para transformar css:
en el archivo .css;
.no-csstransforms .box { color: red; }
.csstransforms .box { color: green; }
en el archivo .js;
if (Modernizr.csstransforms) {
// supported
} else {
// not-supported
}
¿Puede intentarlo?
var temp = document.createElement('div');
var isSupport = temp.style['propName'] != undefined;
Ejemplo: http://jsbin.com/etusoy/latest – starbeamrainbowlabs
Puede ser digno de mención que esta técnicamente pruebas si el explorador admite el CSS3 'transform' estilo y no específicamente la' rotate() '[transformar función] (https://developer.mozilla.org/en-US/docs/Web/CSS/transform#CSS_transform_functions). En mi experiencia (limitada), la primera siempre ha implicado lo último, pero no estoy seguro de si esa es una suposición confiable (ver [esta pregunta] (http://stackoverflow.com/questions/23528176/do-all-browsers -that-support-css3-transform-also-support-all-transform-function)). – Kylok
Ejemplo de trabajo: http://jsfiddle.net/dp3ueaz5/ Pero prefiero usar esta función: http://code.tutsplus.com/tutorials/quick-tip-detect-css-support-in-browsers-with -javascript - net-16444 Es mejor de entender y comprueba automáticamente los prefijos del proveedor. ;) – Dennis98