Modernizr, HTML5 y CSS3

Modernizr es una librería javascript que sirve para detectar el soporte de ciertas funcionalidades de HTML5 y CSS3 en los navegadores. No tiene sentido detectar si un navegador es capaz de servir páginas en HTML5. Lo que se hace es detectar si el navegador tiene implementadas ciertas funcionalidades de forma separada como: canvas, video, geolocalización, bordes redondeados, etc.Actualmente van por la versión 1.6 de Modernizr y ocupa menos de 10Kb (la versión descomprimida son 33Kb). Su uso es muy simple. Vamos a poner un ejemplo sencillo para presentarlo.

Imaginemos que queremos detectar si el navegador del usuario que nos está visitando soporta la nueva etiqueta canvas (elemento de HTML5 que hace las veces de contenedor o “pizarra” y que permite la generación de gráficos dinámicamente). Si no la soporta, no queremos siquiera que se muestre (esto lo haremos con CSS, también apoyándonos en Modernizr), pero si la soporta, dibujaremos dentro del canvas un cuadrado de lado 100px de un color aleatorio.

Nuestro HTML será así. Se ha usado la sintaxis de HTML5, por eso tanto la etiqueta DOCTYPE como el meta charset son tan escuetas:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Modernizr: HTML5 y CSS3</title>
		<style type="text/css">
			.no-canvas #myCanvas {
				display: none;
			}
		</style>
		<script src="modernizr-1.6.min.js"></script>
		<script src="canvas.js"></script>
	</head>
	<body onload="paintCanvas()">
		<canvas id="myCanvas" width="320" height="240"/></canvas>
	</body>
</html>

Como podemos ver, se crea una etiqueta canvas de 320x240px y se le da un identificador muy original “myCanvas”. Se incluyen dos ficheros javascript: el de modernizr y uno nuestro llamado canvas.js (cuyo contenido se muestra un poco más abajo).

Lo interesante aquí es tanto la parte del CSS incrustado donde se le dice que si no tiene soporte para canvas, directamente no muestre el elemento:

<style type="text/css">
	.no-canvas #myCanvas {
		display: none;
	}
</style>

La “magia” hace que si no hay soporte para canvas, no se muestre el elemento canvas. Es decir, se aplica el estilo no-canvas. Si existe, no ponemos ningún estilo en particular (podríamos haber escrito .canvas #myCanvas).

Y nuestro javascript canvas.js será como sigue:

function paintCanvas() {
	if (Modernizr.canvas) {
		// Tu navegador soporta Canvas
		var myCanvas = document.getElementById("myCanvas");
		var context = myCanvas.getContext("2d");
		context.fillStyle = "rgb(" + Math.round(255 * Math.random())
+ "," + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + ")";
		context.fillRect(100, 50, 100, 100);
	} else {
		alert('Tu navegador no soporta Canvas... Aún.');
	}
}

La parte importante de detección es Modernizr.canvas. Modernizr crea un objeto global que tiene un conjunto de atributos de tipo Boolean, correspondientes a las diferentes funcionalidades detectadas. Su valor será “true” si se ha detectado que el navegador soporta aquello por lo que estamos preguntando, es este caso, canvas.

Al cargarse la página, se llamará a la función paintCanvas, cuya misión es dibujar dicho cuadrado dentro del canvas “myCanvas”, si se puede. Si no se puede, nos mostrará un mensaje de alerta. Bastante sencillo ¿verdad?

Descargar ejemplo de Canvas

fuente:
http://www.nekotek.es/blog/2011/01/modernizr-html5-y-css3/