Artículo

---

0 ¡votar!

Comprueba si el navegador permite CSS 3 con JavaScript

Ya sabemos que los navegadores modernos, poco a poco van incorporando la interpretación de código CSS3, pero los más antiguos aún no lo permiten, por lo que si en nuestra aplicación utilizamos este tipo de etiquetas, puede ser que en algunos no se vean del todo bien.

Para evitar esto, podemos testear si el navegador que nos está visitando permite alguna etiqueta CSS3 y si no es así, entonces, que utilice otro conjunto de estilos para que se vea de todo bien.

Esto lo podemos conseguir con el siguiente código que os indicamos a continuación, donde se le indica un elemento CSS3, y nos devuelve si el navegador lo reconoce.

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('borderRadius')) {
alert('Tu navegador soporta la propiedad border-radius');
}

Es un código muy útil para poder crear aplicaciones que se vean igual, independiente del navegador que se utilice.

Vía: Webintenta

Publicado por: Angel Carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios