2011/04/04

Comprobando si el navegador soporta CSS3 con javascript

He encontrado este trozo de código para comprobar si el navegador con el que se está viendo la página soporta cierta propiedad de CSS3. Ojo, hay que pasar la propiedad en notación javascript, es decir, son guión y con la letra siguiente al guión en mayúscula (p.e. border-radius ==> borderRadius)
var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;
   return function(prop) {
      if ( prop in div.style ) return true;
      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });
      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         }
      }
      return false;
   };
})();
Ejemplo de uso
if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

No hay comentarios:

Publicar un comentario