A estas alturas nadie puede negar que Microsoft está haciendo una apuesta en firme para dar soporte a los estándares web y un buen ejemplo de esto es en los nuevos proyectos web MVC 3 tenemos la posibilidad de crear aplicaciones con HTML 5 y CSS 3. Pero una cosa que puede que haya pasado más desapercibido es la librería script Modernizr que viene incluido con los ficheros scripts del proyecto. La versión que viene incluida es la 1.7 pero actualmente ya tenemos disponible la versión 2.0.4.
¿Qué es Modernizr?
Modernizr es una librería javascript open-source que nos permite detectar que características de HTML5 o CSS3 que son soportadas por el navegador. De esta manera podemos crear paginas con las últimas funcionalidades que nos brindan estos nuevos estándares sin preocuparnos si el navegador lo soporta o no, porque esta librería nos avisará y nos brindará la posibilidad de utilizar otras librerías para simular esta funcionalidad.
Modernizr ofrece la posibilidad de controlar más exhaustivamente la experiencia de usuario atraves de la detección de funcionalidades a través de JavaScript.
Nuestro primer proyecto con HTML5 CSS3 y Modernizr
Para empezar a utilizar esta librería y dotar a nuestra aplicación de las últimas caracteristicas de Html5 y CSS3 lo primero que tenemos que hacer es crear un nuevo proyecto web y especificar que queremos utilizar la compatiblidad con HTMl5.
Una vez que ya tenemos el proyecto creado ya podemos empezar a utilizar la librería, porque MVC3 ya te incluye las referencias necesarias para poder trabajar desde el principio, si miramos la página maestra, veremos las referencias a las librerías script y seleccionamos el esquema correcto para la validación del código html5 del documento.
«Se recomienda poner nuestras referencias de los estilos despues de la de modernizr por motivos de rendimiento»
Lo siguiente que tenemos que hacer es añadir la clase no-js
<html class="no-js">
Modernizr remplazará esta clase con js y de esta manera podremos saber si javascript está habilitado en el navegador, ademas de las características que seon soportadas y no soportadas con el prefijo no- . Una vez ejecutada la página la clase del elemento html quedaría de esta manera con un IE9.
<html class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths ">
Como podemos observar en IE9 a día de hoy no soporta flexbox, webgl, touch, websqldatabase, indexddb, history, websockets, borderimage, textshadow, cssanimations, csscolumns, cssgradients, cssreflections, csstransforms3d, csstransactions, webworkers y applicationcache.
¿ Que podemos hacer con esta información ?
Por ejemplo si decidimos utilizar border-image de css3 y sabemos que en IE9 por el momento no es compatible, podemos utilizar una clase de estilos alternativa para mostrar un efecto sustitutorio, en este caso un borde con sombra.
En la página tendremos un contenedor con la class testBorderimg
<div id="cuadro" class="testBorderimg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium pulvinar sodales. Vestibulum sem libero, congue pulvinar scelerisque eu, laoreet convallis tellus. Fusce gravida lacinia dapibus. Pellentesque eget purus vitae elit iaculis accumsan in vel odio. In lorem ligula, molestie at iaculis at, ultricies sit amet felis. </div>
Y en nuestra hoja de estilos tendremos la clase testBorderimg con el estilo border-image y modernizr la sustituirá por no-borderimage en los navegadores que no sea compatible esta opción.
.testBorderimg
{
-webkit-border-image: url(border.png) 27 27 27 27 round round;
-moz-border-image : url(border.png) 27 27 27 27 round round;
width: 350px;
padding: 5px;
border-width: 15px;
}
.no-borderimage #cuadro
{
width: 350px;
padding: 5px 5px 5px 5px;
border: thin solid;
box-shadow: 0.2em 0.2em #CCC
}
La imagen que utilizo para el borde es:
En IE9 que no soporta border-image se vería de esta manera:
En Firefox 5.0 se vería:
De la misma manera podemos detectar que características de HTML5 que soporta el navegador:
if (Modernizr.localstorage) {
alert("window.localStorage is available!");
} else {
alet("no native support for local storage" );
}
Pero eso no se queda ahí, como la librería no puede abarcar todas las posibles pruebas de nuestra web, te permite extender de una forma facil utilizando su propia API.
addTest() Plugin API
- JavaScript method:
Modernizr.addTest(str, fn)Modernizr.addTest(str, bool)Modernizr.addTest({str: fn, str2: fn2})Modernizr.addTest({str: bool, str2: fn})
Si te interesa esta librería y creo que si eres desarrollador web te tiene que interesar puedes obtener más información en su págima web.