Ahora que HTML5 y todas sus tecnologías son la novedad, los desarrolladores web no podemos evitar sentirnos atraidos a sus nuevas características, y todo lo que trae consigo la nueva generación de la Web. Los nuevos tipos de input, los elementos de video y audio, las transiciones, ¡webfonts!
Sin embargo, hay un detalle que como buenos y éticos desarrolladores web que somos, no podemos dejar pasar: la web es para todos. Y dentro de ese «todo» se encuentran:
- Los navegadores que no soportan todas las características de HTML5, o al menos las que pensamos utilizar
- Los navegadores que ya no tienen soporte (por una u otra razón) y que siguen siendo muy utilizados (por una u otra razón)
- El hecho de que HTML5 y todas las tecnologías que abarca sigan siendo borrador, y aun está sujeto a cambios, como el caso de la etiqueta
<video>, que sigue una disputa por cuál formato de video dejar como estándar
Hay una gran variedad de navegadores, y cada uno con distintas versiones, y cada versión con ciertas características soportadas. Decidir cuándo utilizar cierta característica es muy difícil cuando no anticipamos si el navegador la soportará. Pero gracias a eso, existe Modernizr.
Modernizr es una librería de Javascript que detecta el soporte del navegador las características de HTML5. Por ejemplo, nos puede decir si el navegador soporta la regla @font-face, o la propiedad border-radius de CSS, o si reconoce los elementos audio y video, o los nuevos tipos de input, soporte para SVG, e incluso las nuevas tecnologías como IndexedDB, WebSockets y Geolocation, entre otras.
Al descargar Modernizr, podemos seleccionar las características que deseamos que detecte en nuestro sitio. Esto para evitar cargar un script tan grande que no vamos a utilizar por completo. Si es un sitio web, probablemente no requerirá funciones como Web Workers, Web Sockets, localStorage o indexedDB, así que no tiene caso incluirlas en la descarga.
También existen unas funciones, que están en la sección Extra. Hay dos que mostraré en este artículo: load y Add CSS Classes.
En nuestra página web, bastará con agregar la referencia al script de Modernizr para que se carguen todas sus características.
<script type="text/stylesheet" href="/scripts/modernizr.js"></script>
Con esto, automáticamente se harán distintas operaciones que determinan el soporte para las características de HTML5.
En CSS
Creando la referencia al script es suficiente para que esta librería haga su primera y muy importante función: crear clases CSS para indicar la capacidad del navegador para realizar ciertas operaciones. Si revisamos con un depurador (como Dragonfly, Firebug, Webkit dev tools, IE dev tools), veremos algo así al principio del documento:
<html class="js no-touch postmessage history multiplebgs boxshadow opacity no-cssanimations csscolumns cssgradients csstransforms csstransitions no-fontface localstorage sessionstorage svg no-inlinesvg">
Esto me indica lo que mi navegador soporta (javascript, postMessage, history, multiple backgrounds, box shadow, opacity, CSS columns, CSS gradients, CSS transforms, CSS transitions, localStorage, sessionStorage, SVG) y lo que no (touch events, CSS animations, font-face, inline SVG).
Saber qué propiedades soporta el navegador me servirá para definir el estilo más adecuado la página.
.cssgradients #elemento { background-image: -o-linear-gradient(top,#aaa 0;#fff 100%); background-image: -moz-linear-gradient(center top, #aaa 0;#fff 100%); background-image: -webkit-gradient(linear,top left, bottom left, color-stop(0, #aaa), color-stop(1, #fff)); } .no-cssgradients #elemento { background: url(fondo.png) repeat-x top; }
En javascript
Al cargar el script, se crea un objeto Modernizr que contiene una variable por cada propiedad de HTML5, con un valor verdadero o falso que indica el soporte del navegador.
if (Modernizr.borderradius === false){ alert('Su navegador no soporta bordes redondeados'); } if (Modernizr.video === false){ cargarFlash(); }
Anteriormente hablé de cómo detectar el soporte de cierta propiedad en javascript, usando jQuery. Bueno, en ese entonces no conocía Modernizr, y aquí está un ejemplo más sencillo de hacer esa operación, utilizando la herramienta load que ya mencioné.
Creamos dos archivos de javascript como estos:
transitions.js
function Transition(element, properties){
$(element).css(properties);
}
no-transitions.js
function Transition(element, properties, time){
$(element).animate(properties, time);
}
En nuestra hoja de estilos, debemos indicar las propiedades de transiciones:
#elemento { -o-transition: height,width .5s; -webkit-transition: height,width .5s; -moz-transition: height,width .5s; -khtml-transition: height,width .5s; transition: height,width .5s; }
Y en el código desde el que invocamos la modificación del elemento, hacemos esto:
$(document).ready(function() { Modernizr.load({ test: Modernizr.csstransitions, yep: '/scripts/transitions.js', nope: '/scripts/no-transitions.js' }); $('#elemento').mouseenter(function(){ Transitions(this, { width: '300px', height: '200px' }); }); $('#elemento').mouseleave(function(){ Transitions(this, { width: '100px', height: '60px' }); }); });
Ahora bien, al menos en este caso podríamos ahorrarnos un script, si dejamos que CSS haga el trabajo para los navegadores que sí soportan transiciones:
#elemento { width: 100px; height: 60px; -o-transition: height,width .5s; -webkit-transition: height,width .5s; -moz-transition: height,width .5s; -khtml-transition: height,width .5s; transition: height,width .5s; } #elemento:hover{ width: 300px; height: 200px; }
Y en nuestro código, indicamos que se hará la transición por javascript únicamente si no se soportan las transiciones CSS.
if (!Modernizr.csstransitions){ Modernizr.load({ load: '/scripts/no-transitions.js' }); $('#elemento'). }
Esto nos permitirá incluso manipular la interfaz para el usuario en nuestras aplicaciones:
// Si el navegador no soporta el tipo "range" en input // usar el control Slider de jQuery-UI $(document).ready(function() { if (!Modernizr.inputtypes.range) $('#range1').slider({min: 1,max: 10}); });
Seguramente hay mejores formas de aprovechar Modernizr que las que muestro aquí, pero estos son sólo ejemplos de cómo utilizar la librería. Ya dependiendo cómo hagan su aplicación decidirán la forma de utilizarla. Pero sin duda es la mejor herramienta para aprovechar lo que HTML5 trae consigo y al mismo tiempo seguir soportando versiones de navegadores que no lo soportaron (e Internet Explorer, que se sigue quedando atrás… por una u otra razón).
Deployando .NET 
Un comentario sobre “Modernizr: Detectar soporte de HTML5 y CSS3”