Actualidad y case studies sobre finanzas integradas, APIS y mucho más
4 min lectura
| 04 enero 2016
Cuando un profesional se dedica al desarrollo de proyectos digitales hay una máxima, lo que se ve en el navegador es lo que es. Da igual qué backend o qué estilos tenga nuestra página web si a la hora de renderizarlo en el navegador se ve de forma distinta a la esperada. La librería JavaScript Modernizr es la solución para evitar disgustos: es el mejor testeador posible para detectar cuáles son las características del proyecto que soporta cada navegador.
Concretamente, Modernizr es una librería que revisa 18 características de estilos CSS3 y 40 más relacionadas con el documento HTML, sobre todo su última versión disponible, HTML5. Esto es interesante porque los navegadores más modernos ejecutan recursos que los más antiguos no pueden. La idea es aprovechar las ventajas de los primeros sin dejar de servir en los segundos. Así se ajusta el diseño a la experiencia de usuario real que tendrá la web para todos los navegadores. Facilita la creación de proyectos digitales todoterreno.
Instalación y herramientas de Modernizr
El proceso de descarga e instalación de la librería en una web:
– El primer paso es descargar el archivo con el código fuente de Modernizr. El código en lenguaje JavaScript se encuentra en dos variables distintas: por un lado la de Desarrollo, que es un script completo con todas las funcionalidades de la librería, que está sin comprimir y que es perfecto para la fase de desarrollo. Por otro lado la variable de Producción, que son las librerías específicas de testeo de páginas web una vez que estas ya están subidas al servidor de producción. Es recomendable instalar solo los módulos que se usen. Este es el listado completo de funcionalidades y modulos de Modernizr.
– Para usar esta librería JavaScript es necesario incorporar el script de Modernizr en el <head> de la web, justo después de las declaraciones de estilos CSS del site. Primero cargan los estilos y después la librería. El script que habría que añadir en el <head> del proyecto es el siguiente:
<script src=”modernizr.js"></script>
Modernizr utiliza fundamentalmente dos herramientas para detectar cuáles son las funcionalidades concretas disponibles en cada navegador:
1. Objeto JavaScript: una vez instalada y cargada la librería Modernizr, el objeto JavaScript permite detectar qué funcionalidades del proyecto están soportadas en cada navegador, tanto lenguaje HTML como estilos CSS. Este tipo de detección de funcionalidades disponibles se produce a través de variables booleanas de true (cierto) o false (falso). True significa que el navegador soporta la funcionalidad; false que no lo hace.
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
Dos casos prácticos a partir del ejemplo teórico de arriba. El primero prueba si el navegador usado por el usuario soporta los eventos touch de nuestro proyecto. El segundo detecta si se pueden aplicar sombras:
if (Modernizr.touch){
//el navegador soporta eventos touch
} else {
//el navegador no soporta eventos touch
}
if (Modernizr.boxshadow) {
// Podemos aplicar sombras!
} else {
// La propiedad box-shadow no está disponible
}
2. Clases CSS: la librería carga de forma automática todas las clases CSS que corresponden a las funcionalidades de estilos que reconoce un navegador moderno: canvas, eventos touch, sombras, geolocalización, vídeo, audio, gradientes, opacidad, marco para imágenes, almacenamiento, animación, funcionalidades con bases de datos… En este sentido, este sería el documento HTML tipo con estas clases:
<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="elemento"></div>
</body>
</html>
La mayoría de funcionalidades modernas en HTML5 y CSS3 son ejecutadas en los navegadores modernos. No sucede lo mismo con los antiguos. En ese caso, el desarrollador lo que debe hacer es crear las clases necesarias para imitar esa funcionalidad para los navegadores menos recientes: usar el CSS clásico para facilitar esa propiedad.
Si se desea sombreado y Modernizr no ha instalado esa propiedad de forma automática porque el navegador es antiguo, se incluye a mano:
.elemento{
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
Librerías Polyfills y el método Modernizr.load()
Modernizr dispone de un método que permite a los desarrolladores la carga bajo demanda de librerías o plugins que aumentan las funcionalidades de los navegadores menos modernos. La librería se cargaría solo si el usuario visita una página web con algún estilo concreto no disponible en el navegador.
Esto se consigue con la carga de uno de estos plugins o polyfill mediante el método Modernizr.load(). Así se mantiene la UX en navegadores antiguos.
Los pasos a seguir:
– Con Modernizr se puede detectar si una funcionalidad está o no disponible dentro del navegador utilizado por el usuario. En el caso de que esa propiedad no esté disponible en el navegador, el método Modernizr.load() puede cargar el polyfill específico para esa función.
– ¿Cómo usar el método Modernizr.load() para incorporar librerías? El código necesario es sencillo, en este caso incorpora geolocalización:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
En la sintaxis anterior hay tres elementos distintos:
– test: hace mención a la funcionalidad que queremos que se ejecute dentro del navegador del usuario.
– yep: si la condición cumple, cargamos la funcionalidad.
– nope: si la condición no se cumple, cargamos la alternativa, el polyfill de geolocalización para navegadores antiguos.
Existen algunas características añadidas que se pueden cargar también:
– both: se cumpla o no la condición, se carga la funcionalidad.
– load: carga la funcionalidad independientemente del test que realice la librería JavaScript Modernizr en el navegador.
– callback: carga la funcionalidad una vez estén los recursos.
– complete: carga la funcionalidad haya o no recursos.
Síguenos en @BBVAAPIMarket
