Moderniz

Si aún no has oído hablar de Moderniz es que eres un bicho raro ;-)

Moderniz es una librería javascript que todo el mundo ha acogido con los brazos abiertos y ha conseguido mucha popularidad en muy poco tiempo.

Por ejemplo, se incluye por defecto en las plantillas de nuevo proyecto de ASP.NET MVC 3 en Visual Studio. Con esto lo que quiero decir es que, al igual que jQuery, Moderinz va a ser una biblioteca que veremos durante mucho tiempo en casi cualquier proyecto web.

Hasta aquí porque tenemos que conocer de la existencia de Moderniz, pero ¿Para qué sirve exactamente Moderniz?

Según su propia página, “Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.”

En mis propias palabras, “Moderniz permite programar sitios web tomando ventaja del nuevo HTML5 y CSS3, permitiendo cierta compatibilidad con versiones anteriores de los navegadores que aún no soportan las nuevas características de HTML5 y CSS3”.

Cuando diseñas una página web, tu intención primera es siempre utilizar los estándares más actuales y exprimir al máximo las capacidades y nuevas características de la última versión de los navegadores de turno. Sin embargo, todavía tenemos que lidiar con versiones antiguas de navegadores (sobre todo en el caso de IE) y no queremos que nuestro diseño se rompa en estas versiones de coleccionista.

Todo el anterior párrafo tiene un nombre muy bonito y muy americano que es “Graceful Degradation” o “Degradación elegante”. En realidad, este concepto hace mención a que nuestra intención no fue desarrollar nuestro sitio web para IE6, pero que si algún perdido aun nos visita con este vetusto navegador vamos a intentar que por lo menos, pueda navegar “dignamente” por nuestro sitio web.

Está claro que podrías tener distintas versiones de tu sitio web para distintas versiones de distintos navegadores, pero… mucho distinto veo yo en este párrafo.  También podrías utilizar hacks CSS, pero no está considerada una buena práctica.

Es justo para intentar solventar esta “degradación elegante”, donde aparece en escena Moderniz.

A grandes rasgos, Moderniz permite hacer lo siguiente:

·         Detectar características del navegador en vez de versiones de navegador.

·         Permitir dar estilo a etiquetas de HTML5 en versiones de IE anteriores a la 9.

Cuando hablamos de detectar características del navegador en vez de versiones del navegador, estamos queriendo decir que ya no estila detectar (vía userAgent) en que navegador se está ejecutando nuestra página web, sino detectar que características soporta el navegador actual y actuar en función de este último criterio.

Si por ejemplo quisiéramos utilizar la propiedad CSS3, border-radius (bordes redondeados), escribiríamos algo así:

        .caja

        {

            background-color: Yellow;

            border: 1px solid Red;

            border-radius: 8px;

            height: 25px;

            width: 100px;

        }

A continuación te muestro como se muestra nuestra caja en algunos navegadores:

IE9	FF	Chrome	IE8

¡Vaya, parece que IE8 no implementa todavía la propiedad border-radius!

Podríamos comenzar a utilizar hacks css para IE8 (de hecho para IE hay toda una sintaxis de hacks que, aunque sea una ironía, están muy bien implementados), pero lo que vamos a hacer es “detectar si el navegador soporta bordes redondeados”, nos da igual que sea IE8 o cualquier otro navegador, estamos investigando la característica, no el navegador y versión.

El primer paso para llevar a cabo esta detección es descargar Moderniz.

Cuando nos dirigimos a la página de descarga de Moderniz, lo primero que nos pregunta es qué características queremos detectar y en función de nuestro selección nos bajaremos una librería con más o menos código (más o menos KB).

Si estás en Visual Studio, puedes directamente descargar la versión de desarrollo de Moderniz como un paquete con Nuget (en la versión de desarrollo, además de no estar minimizado, están incluido todo el pack de detección de características de Moderniz).

Una vez descargado, simplemente agregaremos una referencia a la librería en nuestra página, después de los enlaces a hojas de estilos que tengamos en la misma (esta recomendación es desde la propia documentación de Moderniz).

<script src="Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>

Con solo haber incluido la librería, podemos ver que nuestra etiqueta html ha pasado a tener un montón de nuevas clases CSS. En realidad, tendrá tantas clases CSS como características hayamos querido detectar (según la descarga de producción de Moderniz) y además los nombres de las clases podrán ser de dos tipos: nombreCaracterística o no-nombreCaracterística.

Por ejemplo, si vemos la etiqueta html en nuestro navegador, veremos que podría ser la siguiente:

<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 generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

·         Las características en rojo no están soportadas (por ejemplo, no-touch nos dice que el navegador actual no soporta eventos táctiles, estilo iPad).

·         Las características en azul están soportadas (por ejemplo, podemos utilizar borderradius sin problemas).

Fíjate que estoy hablando del “navegador actual” (sin entrar en detalle de sí es un explorador u otro y sin importarme su versión).

Sin embargo, si navegamos ahora a nuestra página con IE8 (ahora sí hablo de un navegador y versión concreta), veremos que la característica borderradius no está soportada.

<html class="… no-borderradius …">

Teniendo ya esta información, podríamos tener ahora el siguente código CSS:

        .borderradius .caja

        {

            background-color: Yellow;

            border: 1px solid Red;

            border-radius: 8px;

            height: 25px;

            width: 100px;

        }

        .no-borderradius .caja

        {

            background-color: Blue;

            border: 1px solid White;

            height: 25px;

            width: 100px;

        }

La solución pasa por dar un aspecto a nuestra caja si está contenido en un elemento .borderradius (clase agregada a la etiqueta html si el navegador soporta la característica) u otro aspecto si está contenido en un elemento no-borderradius (el test de esta propiedad no fue positivo).

IE9 o cualquier otro navegador que sí soporte border-radious	IE8 o cualquier otro navegador que no soporte border-radious

 

Hasta aquí, Moderniz nos ha ayudado a detectar características y escribir nuestras hojas de estilo en función del soporte que hacen los navegadores a las nuevas características de HTML5  y CSS3.

Sin embargo, Moderniz también nos brinda un objeto Javascript con propiedades booleanas para indicar la misma información anterior pero a nivel de script.

        if (Modernizr.borderradius) {

            alert("Tu navegador soporta border-radious");

        }

        else {

            alert("Tu navegador es antiguo, no soporta border-radious");

        }

Por último, Moderniz también habilita que puedas dar estilo a las etiquetas HTML5 en IE8 o anterior. En IE8 no se permite dar estilo a la etiqueta nav porque no la conoce. Sin embargo, Moderniz se encarga de registrar las etiquetas HTML5 en IE8 y anteriores para que puedas dar estilo a las mismas a través de reglas CSS con normalidad.

Fíjate que Moderniz no hace que IE8 entienda HTML5, sino que simplemente puedas darle estilo e intentar “emular” a través de CSS la apariencia de estas etiquetas.

Espero que este post te haya servido para entender cómo funciona Moderniz, lo ligero y útil que es.

Un saludo!