Modernizr y las capacidades HTML5 y CSS3

03/Ene/2012 JavaScript , , , 4 Comentarios

Modernizr es una librería Javascript que nos va a ayudar con la detección del soporte de capacidades HTML5 y CSS3 de un navegador. Si vamos a utilizar HTML5 o CSS3 en nuestra página web, Modernizr nos va a indicar cuales de los elementos o funcionalidades de estos lenguajes están disponibles en el navegador web que está cargando nuestra página.

Lo primero que tenemos que hacer es ir a la web de Modernizr y descargarnos la librería. Hay que indicar que tenemos una versión para desarrollo y una versión para producción la cual es parametrizable. Para las pruebas puedes utilizar la primera, ya que es la que trae todas las funcionalidades de Modernizr.

Una vez tenemos la librería, tenemos que incluirla en nuestra página, mediante una carga normal de un script:

  1. <script type="text/javascript" src="modernizr.js"></script>

Ahora ya pasamos a preguntar por capacidades HTML5 y CSS3. Por ejemplo, si queremos saber si el navegador tiene soporte para el elemento Canvas pondremos lo siguiente:

  1. if (Modernizr.canvas)
  2. document.write("SI que existe soporte de canvas<br/>");
  3. else
  4. document.write("NO existe soporte de canvas<br/>");

Vemos que la variable Modernizr.canvas es la que nos devuelve un true o un false dependiendo de si hay soporte en el navegador o no.

Otra de las variables nos permite conocer si hay soporte del elemento vídeo. En este caso es la variable Modernizr.video. Y el código a utilizar, similar al anterior:

  1. var video = (Modernizr.video)?true:false;
  2. if (video) document.write("Si se soporta el elemento vídeo");
  3.  

Lo mismo pasa con las capacidades de CSS3. Por ejemplo, si queremos saber si el navegador soporta las animaciones de CSS3, podemos preguntar por el atributo Modernizr.cssanimations.

  1. var cssanimations = (Modernizr.cssanimations)?true:false;
  2. if (cssanimations)
  3. document.write("SI se soporta las animaciones CSS3<br/>");
  4. else
  5. document.write("NO se soporta animaciones CSS3<br/>");

Así ya tendremos nuestra librería Modernizr cargada y lista para utilizar detectando las capacidades HTML5 y CSS3.

Vídeos sobre Modernizr


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Modernizr y las capacidades HTML5 y CSS3”

Víctor Cuervo

Víctor Cuervo

@Jordi,

Muchas gracias por tu enlace. Muy interesante el artículo.

Víctor Cuervo

Jordi

Hola amigos excelente artículo. Aprovecho para adjuntar un enlace que complementa vuestra explicación. Se trata de lo específico de hacer compatibles los elementos estructurales de HTML5 en todos los navegadores. Es muy importante poner el display:block para que se pinten bien en IE. Lo digo para ahorrar a + de 1 algún dolor de cabeza. Allá va el post que explica cómo hacer esto. Gracias a todos y ánimo con el blog.

http://programarivm.com/2012/01/mi-primera-web-en-html5-elementos-estructurales-de-html5-compatibles-en-todos-los-navegadores-con-modernizr/

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*