Comenzando con Modernizr

Modernizr es una librería de Javascript utilizada por multitud de sitios web famosos, incluyendo Twitter, Good.is, About.com... En anteriores artículos, hemos hecho referencia a esta gran librería, pero nunca hemos profundizado a fondo en cómo funciona. ¿Quieres saberlo?

¿Qué es Modernizr?

Antes que nada, vamos a dar respuesta a la principal cuestión. ¿Qué es Modernizr?

Basándonos en su web oficial, podemos decir que Modernizr es un librería de Javascript que detecta características de HTML5 y CSS3 en el navegador del usuario.

Como ya sabemos, HTML5 y CSS3 han revolucionado el diseño web dándonos la posibilidad de crear nuevos elementos con diseños, realmente asombrosos. Pero por desgracia, dichos estándares no son soportados por los navegadores de antaño. Modernizr te ayuda a hacer frente a este problema comprobando si el navegador del usuario cuenta con funciones específicas. Si la función es no es compatible, entonces podemos ejecutar un script específico para navegadores antiguos que imite la función que no soporta el navegador.

Configurando Modernizr

En la página oficial de Modernizr, podemos encontrarlo en dos versiones para su descarga, la versión en desarrollo y la versión en producción.

La versión de desarrollo es la versión sin comprimir en la que vienen todos los tests de todas las características. Sin embargo, en la versión de producción podremos seleccionar las características que necesitemos testear en nuestro proyecto.

Si has visto la web, te habrás percatado de que hay un montón de opciones entre las que elegir cuando descargamos la versión de producción de Modernizr. Para este ejemplo, hemos seleccionado todos los tests para las características principales. Genéralo y guarda el código en un archivo. Después, inserta el archivo dentro de la sección head de tu HTML.

<script src="modernizr.js" type="text/javascript"></script>

Por último, añade la clase no-js al tag html

<html class="no-js">

Esta clase es necesaria, en caso de que el usuario esté navegando con el Javascript deshabilitado, podemos saberlo a través de esta clase. Si todo está correcto, Modernizr reemplazará esta clase por la clase js.

Eso es todo, ahora que tenemos todo configurado, estamos listos para utilizar Modernizr.

Trabajando con clases

Ahora, si abrimos el Inspeccionador de elementos en nuestra web, verás que se han añadido muchas clases a la etiqueta html de nuestro documento. Estas clases las genera Modernizr y dependen de las capacidades del navegador del usuario.

Por ejemplo, si el navegador no soporta las animaciones de CSS3, Modernizr generará la clase no-cssanimations. Pero si lo hace, generará la misma clase sin el prefijo no- delante, quedándose solo en cssanimations.

Vamos a echar un vistazo al código de abajo:

<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase 
no-indexeddb no-hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize
no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients
no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-generatedcontent no-video
no-audio no-localstorage no-sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil
no-svgclippaths no-placeholder">

Este código se ha generado del navegador de un usuario que utilizaba Internet Explorer 7 y, como puedes ver, hay muchísimas clases. Como puedes ver, este navegador carece de las características modernas de los nuevos navegadores como por ejemplo, la propiedad de CSS3 border-radius.

Por lo tanto, en el caso de querer reemplazar el diseño para aquellos navegadores que no contemplen, por ejemplo, la propiedad border-radius, podemos utilizar la clase no-borderradius.

.no-borderradius div {
    /*--  hacer algo en sustitucion del border-radius --*/
}

Testeando las características del navegador

Como he dicho anteriormente, Modernizr es capaz de testear y detectar características del navegador que estemos utilizando, de forma sencilla. Para probar una característica del navegador podemos utilizar la siguiente sintaxis:

Modernizr.featuretodetect

Asumiendo que queremos comprobar si nuestro navegador soporta WebGL, podemos escribir:

if (Modernizr.webgl) {
}

También podemos negar la declaración, para una comprobación negativa. Si en este caso devuelve true, es que el navegador no soporta esta característica:

if (!Modernizr.webgl) {
}

O podemos condicionar a dos resultados según el parámetro devuelto, tal que así:

if (Modernizr.webgl) {
    /* Script A */
} else {
    /* Script B */
}

El código de arriba comprueba que si el navegador soporta WebGL ejecute el script A. Sin embargo, si no soporta esa característica, se ejecutará el script B. De todas maneras, el script solo será cargado cuando se cumpla la condición, independientemente de cual sea.

Fuente: hongkiat.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP