Descubriendo Modernizr

Hace un par de días empecé la construcción del portafolio como UX-Designer y Font-End Developer que presentaré para el Talent Fest de Laboratoria.

En realidad no sabía cómo empezar, no tenía una idea fija de como seria ni como estaría organizado, así que decidí tomar inspiración de algunos templates que están colgados en la web (No hay nada de malo en eso…Hasta los más grandes artistas y genios creativos buscan inspiración en lo que ya existe).

Tarde 5 horas en inspirarme hasta que por fin vi la luz al final del túnel, encontré muchos templates interesantes pero hubo uno que capto mi atención, tenía clases que no conocía, su archivo.js estaba dentro de la etiqueta <head>, todo muy esotérico como diría mi profesora.

Buscando en la web me entere todas esas nuevas clases eran parte de una librería llamada Modernizr.

Mi primera reacción :P

Pero…¿Qué es Modernizr?

Modernizr es una librería de JavaScript que detecta que funcionalidades de HTML5 y CSS3 están disponibles en nuestro navegador, para utilizarlas, o no, según sea caso.

La ventaja de este Framework es que nos permite tener la seguridad de que todas las funcionalidades que utilizamos se ejecutaran sin problemas o en todo caso nos ayudara implementar variantes si es que nuestro navegador no soporta alguna funcionalidad.

Las Clases “Esotéricas”

Al usar Modernizr en nuestra página y visualizarla en el browser, la librería crea instantáneamente una serie de clases que son asignadas al elemento <html> del documento únicamente si el navegador es compatible con las características CSS3 Y HTML5. Esto permite adaptar nuestro file.css según las funcionalidades que no son soportadas.

<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head>
...
<script src="/js/lib/vendor/modernizr-custom.min.js"></script>
</head>
<body>
<div class="element"></div>
</body>
</html>

¿Modernizr usa Objetos?

Cuando usamos Modernizr en nuestra página, este crea un objeto JavaScript que instantáneamente genera una serie de propiedades que nos indican si cada una de las funcionalidades presentes en CSS3 y HTML5 están disponibles o no.

Las propiedades contienen valores booleanos (true o false) que podemos utilizar para saber la disponibilidad de las funcionalidades que deseamos utilizar.

if (Modernizr.canvas) {
// Yupi!!..Podemos utilizar canvas
} else {
// Oh noes!! El elemento canvas no está disponible :(
}

El Método Load()

Modernizr.load() es una manera sencilla para cargar librerías sólo cuando las necesitemos , en pocas palabras, cuando una funcionalidad está disponible. Es una buena manera mejorar un poco más el rendimiento de nuestra app.

Ahora, imaginemos en que desarrollamos una aplicación basada en el API de geolocalización. Con Modernizr podemos saber si el navegador ofrece soporte a ese API, mediante la propiedad Modernizr.geolocation . Si deseamos cargar unos recursos u otros dependiendo de la disponibilidad de esta funcionalidad, este método nos ahorrará algo de código fuente y tal vez acelere un poco nuestra página.

Con éste método podemos indicar a los navegadores que no soporten una API que ejecuten algún polyfill que pueda “reemplazar” la funcionalidad, y así poder utilizar esa característica.

¿Por qué debemos colocar el script en la etiqueta HEAD?

Esa fue una de las dudas que tuve antes de conocer un poco más sobre esta librería. Todos los Developers sabemos que por inercia los scripts deben cargarse antes de cerrar la etiqueta BODY y que lo primero que debe cargar en la página son los estilos CSS que se encuentran dentro de la etiqueta HEAD, pero lo que encontré fue super interesante.

La razón de colocar el script dentro del HEAD,es porque debe cargarse antes del BODY de la página, debido a un componente llamado HTML5 Shiv que nos permite usar HTML5 en versiones anteriores a Internet Explorer 11 . Es decir, ya no tenemos que preocuparnos de que nuestra página se vea espantosa dentro de un navegador antiguo (Toma eso IE…!! 😎).

También es aconsejable colocar este script después de nuestra hoja de estilos CSS (style.css o como tú lo hayas nombrado) para evitar un comportamiento poco deseable llamado FOUC, por el cual nuestra página web puede mostrarse, por un pequeño espacio de tiempo sin los estilos CSS aplicados.

Definitivamente Modernizr es una librería super cool que facilita mucho el uso de funcionalidades y la renderización de nuestra página web. Aún no sé si usaré esta librería dentro de mi página pero creo que sería interesante incluir conocimiento nuevo y darle valor agregado a mi portafolio.

Si deseas saber más cerca de Modernizr puedes encontrar la info completa aquí.