Es actualmente una herramienta muy común en el ámbito del desarrollo web, sobre todo en lo referente a HTML5 y CSS3, y ha logrado una gran popularidad.
Básicamente permite que las paginas web desarrolladas en HTML5 y CSS3 se visualicen de forma correcta en diferentes navegadores, que como todos saben no es fácil de lograr, sobre todo si se trata de navegadores que no tienen soporte para estas tecnologías como por ejemplo IE6.
Podemos descargar esta librería en el sitio de
Modernizr. Se dispone de dos versiones, una para desarrolladores, y una para entornos productivos, de igual forma es posible elegir las opciones que queremos soportar, brindándonos una gran flexibilidad a la hora de crear la compilación sobre todo la que usaremos en ambientes productivos.
Su uso es bastante sencillo, simplemente agregamos una referencia a la librería en nuestra página, después de los enlaces a hojas de estilos que tengamos en la misma, tal como vemos a continuación:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Prueba modernizr</title>
<script src="modernizr.js"></script>
</head>
<body>
<div id="Contenedor">Texto de prueba</div>
</body>
</html>
Ahora, si abrimos nuestra pagina de prueba en un navegador antiguo, y revisamos el código de la misma, veremos como por el solo hecho de tener incluida esta librería se presenta un cambio en la etiqueta html.
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity
no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions
video audio cufon-active fontface cufon-ready">
Si observamos con detenimiento, podemos observar que algunas características tienen el prefijo no-, lo que nos indica que estas no son soportadas por el navegador.
Ahora, solo debemos definir en nuestra hoja de estilos la forma como queremos que se comporte nuestra web, cuando encuentra que alguna característica no soportada, esto lo podemos hacer como vemos a continuación.
/**
* Estilo por defecto del contenedor.
*/
#Contenedor {
padding : 2em;
margin : 2em;
text-align : center;
border : 1px solid #000;
}
/**
* Estilos usados de acuerdo al navegador.
*/
.rgba #Contenedor {
border-color : green;
color : green;
}
.no-rgba #Contenedor {
border-color : red;
color : red;
}
El resultado cuando usamos IE10 es el siguiente:
Si cambiamos el modo de exploración a IE7 notamos el cambio:
De esta forma podemos lograr que nuestras paginas se puedan visualizar sin problema en diferentes navegadores,
