htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Cómo detectar si el navegador soporta HTML5 (y CSS3)

Cómo detectar si el navegador soporta HTML5 (y CSS3)

Si bien la mayoría de los navegadores modernos (Chrome, Safari, Firefox, Opera, IE9) ya soportan gran cantidad de las nuevas funcionalidades del HTML5, todavía hay varios de ellos (justamente los más usados) que todavía no lo hacen. El problema que surge aquí es como saber si el navegador que está utilizando el usuario de nuestro sitio soporta video, canvas, localStorage, etc.

Es aquí donde entra Modernizr, una librería javascript que nos permite detectar el soporte a varias de las nuevas características que brindan el HTML5 y el CSS3.

Usando Modernizr para detectar HTML5 y CSS3

Su utilización es bastante simple.
Primero debemos descargar el archivo js desde el sitio de Modernizr. Luego de subir el mismo a nuestro sitio, incluímos la librería en el head:

<script src="modernizr.min.js"></script>

No es necesario llamar a ninguna función para que Modernizr comience, ya que se inicia automáticamente, creando el objeto Modernizr, el cual tiene muchas propiedades de tipo boolean (verdadero o falso), cada una de ellas corresponde a una de las propiedades que se pueden detectar.

Por ejemplo, si queremos detectar si el navegador soporta el elemento video, debemos escribir el siguiente código javascript:

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

Para detectar el elemento canvas:

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

Estos son solo algunos ejemplos, como dije anteriormente, con Modernizr podemos detectar tanto funcionalidades de HTML5 como de CSS3.

Para más información: Modernizr

Comparte conocimiento:
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Facebook
Facebook
0
  • Bitcoin
  • Ethereum
  • Bitcoin cash
  • Tether
  • Stellar
Scan to Donate Bitcoin to 1L9sRKFJaXHQ8skQXR9b76KATmtEa9hsPn

Bitcoin!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin

Scan to Donate Ethereum to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Ethereum!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum

Scan to Donate Bitcoin cash to qqysclxkfj4wnrqepksydauq74lzud805v9zlptxa8

Bitcoin cash!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash

Scan to Donate Tether to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Tether!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether

Scan to Donate Stellar to GDIP3K46BRH3CDVGKDYWNEVHFI5LGG5MOBWU7QUCOCNOW4DJYIEMY2QC

Stellar!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar

¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

6 comentarios para “Cómo detectar si el navegador soporta HTML5 (y CSS3)”

  1. Nico F. dice:

    Había escuchado mil veces de Modernizer, pensé que era para algo muy diferente, valió la pena leerlo 🙂

  2. […] manual toca muchos temas: desde los nuevos elementos semánticos hasta la biblioteca Modernizr pasando por una breve explicación de geolocalización o los elementos canvas, video, etc. […]

  3. Gabo dice:

    Otra librería útil, ojalá sigan saliendo librerías de este tipo así ya de una vez nos podremos pasar a HTML5… y afuera Internet Explorer!

    Gabo.

  4. Iña dice:

    Retuiteado, porque lo supisteis explicar muy bien.

  5. Nuevos Sitios Web dice:

    Es impresionante Modernizer, en su sitio web puedes ver que cada día es capaz de detectar más y más funcionalidades nuevas!

  6. […] como Modernizr nos asiste para detectar qué nuevas funcionalidades de HTML5 y CSS3 soporta el navegador del […]

Dejar un comentario

¿Quieres saber más?

 

¡La mejor información en tu correo!

(proximamente importantes novedades)