Detectar si el navegador soporta HTML5 y CSS3

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

A estas alturas la mayoría, aunque no todos los navegadores webs actualizados: Firefox, Chrome, Safari, IE9, Opera… ya dan soporte a gran cantidad de las nuevas funcionalidades de HTML 5. Para los webmasters saber si el navegador de los visitantes que acceden a nuestro site  soportan: video, canvas, localStorage, el tag audio… se hace tremendamente necesario.

Para solucionar este problema existe una librería javascript llamada Modernizr que nos permite detectar el soporte a varias de las nuevas características que ofrecen HTML5 y CSS3.

modernizr

Modo de utilizar Modernizr para detectar HTML5 y CSS3:

  1. Descargar desde su web el fichero .js, también podemos posonalizarlo nosotros mismos desde el apartado download.
  2. Después de subirlo a nuestro servidor añadir la librería en el head:
  3. <script src=”modernizr.min.js”></script>
  4. No requiere llamar a ninguna función para que Modernizr comience (se inicia automáticamente al crear el objeto Modernizr) en este, cada propiedad corresponde a funciones tipo boolean (verdadero o falso). Por ejemplo, para detectar si el navegador soporta el elemento video, debemos escribir el siguiente código javascript:

Para detectar si el navegador soporta el elemento audio:

if (Modernizr.audio) {
// el navegador del usuario soporta el elemento audio
} else {
// el navegador no soporta audio
//(una solución alternativa podría ser usar Flash)
}

Para detectar si el navegador soporta el elemento canvas:

if (Modernizr.canvas) {
// el navegador soporta canvas
} else {
// no hay soporte para canvas
}

2 comentarios

  1. carlos dijo:
    23 Febrero, 2013
    Responder

    todas las web dan el mismo ejemplo de detectar audio y canvas, aja, pero como detecto que puedo o no utilizar la propiedad box-shadow de css3??? nadie da ejemplo de detección de css3

  2. 25 Septiembre, 2014
    Responder

    […] que no soportan aún animaciones CSS, podremos utilizar Animate.css conjuntamente con jQuery y Modernizr. De esta forma conseguiremos que todos nuestros usuarios puedan ver correctamente nuestra […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.