Asegura que tu sitio funciona lo mejor posible en todos los navegadores con Modernizr.
El concepto de web actual es algo estupendo. La llegada de HTML5, CSS3 y los frameworks de JavaScript como por ejemplo Jquery ha transformado completamente el mundo del diseño web. Esto permite los diseñadores crear interactividad avanzada con una facilidad que nunca habían tenido hasta ahora.
Desafortunadamente, mientras que este tópico está basado en una verdad, no podemos ignorar el pasado. Para los que trabajan diariamente como diseñadores web, hay una tarea diaria que puede ser desafiante a la par que frustrante: la compatibilidad con los navegadores no actualizados.
El problema con los antiguos navegadores es que no soportan estas nuevas características que tanto nos gustan. Puede que no funcione con el CSS que tratas de poner en tu hoja de estilos, pero podrían usar alguna propiedad más antigua. Trabajar para dar soporte a estos navegadores desactualizados puede convertirse en una tarea tan frustrante, que a veces abandonamos y dejamos de aplicar estas nuevas propiedades. Si no usas las últimas propiedades de CSS3, y te centras en etiquetas probadas y testeadas de XHTML, evitarás todos estos problemas, ¿verdad?
Uno de los mayores desafíos cuando adoptas nuevas prácticas y herramientas, es saber que navegador las soporta. Cuando antes sólo teníamos que trabajar con un par de versiones de Internet Explorer y una primera versión de Firefox, esto era mucho más rápido. Sabíamos de qué era capaz el navegador. Esto permitía a los diseñadores centrarse en el comportamiento y las capacidades de cada uno, optimizando un diseño para cada navegador.
Sin embargo hoy en día hay al menos media docena de opciones viables para escoger como navegador, y cada uno tiene varias versiones. Se ha convertido en casi imposible estar totalmente relacionado con las características de cada navegador con el que se puede acceder a tu web. Como resultado, ya no es práctico concentrarse en versiones individuales de navegadores. Pero hay una solución simple y elegante…
¿Qué es Modernizr?
Modernizr es una librería de JavaScript que te permite detectar, según que navegador se use para acceder a tu web, cómo se van a mostrar partes específicas de tu contenido y si el navegador lo soporta o no. La librería trabaja permitiéndote probar el navegador a través de una serie de test. Por ejemplo, si usas
CSS transitions, puedes testear si funciona o no en el navegador, y si no lo hace, probar alternativas.
Modernizr te permite escribir código adicional CSS y JavaScript para hacer tu web visible, según las capacidades del navegador del usuario.
La librería se instala rápidamente, y es fácil de usar. Cuando una página con Modernizr carga, se crea un objeto JavaScript que contiene el resultado de los test. Las clases CSS se añaden a <html>, permitiéndote probar si una propiedad en script o CSS es compatible.
Te preguntaras que es lo que hace a esta librería tan útil. Modernizr te permite testear más de 40 nuevas propiedades, como
font-face,
rgba,
CSS animations,
gradients,
canvas, HTML5
audio y
video,
almacenamiento local,
WebGl… Ya no tendrás que hacer test para cada propiedad, sino todas a la vez. Sin embargo, uno de los puntos fuertes de Modernizr es que puedes testear modularmente. Sólo lo que necesitas.
¿Por qué usarlo?
Hay muchas diferencias entre usar Modernizr o el método tradicional. Por ejemplo, la forma de detectar las propiedades es más fiable. No está atado a versiones individuales de cada navegador. El usuario que está realizando todos los test de cada propiedad en cada navegador no tiene que aprender y conocer cada uno de ellos.
Con Modernizr simplemente construyes la configuración de los test una vez. Después puedes descansar, sabiendo que aunque los navegadores se actualicen y aparezcan nuevas propiedades, el diseño de tu web seguirá mostrándose igual.
Es un método mucho más conveniente para compatibilizar antiguas versiones de navegadores. La librería se ejecuta en milisegundos, e identifica las partes del contenido que no están soportadas. Además arreglas de una vez un problema que de usar otra solución tendrías que repetir (optimiza).
Modernizr te permite usar las últimas propiedades de HTML5 y CSS3 para mejorar tus diseños, sin excluir navegadores antiguos.
Otro beneficio de Modernizr es que puedes bajarte la librería con el código de los test específicos que necesitas. Aunque si eres feliz con los más de 40 test, puedes mejorar el rendimiento usando una versión alojada de la librería (
CDN).
Cómo instalar Modernizr.
1.- Configurar y descargar.
Visita la web de Modernizr
http://modernizr.com/ y haz clic en el apartado del menú Download. Si quieres probar todos los test, puedes hacer clic directamente en el botón de descarga de la versión de desarrollo. Si estas creando una versión preparada para producción, selecciona las propiedades del test y haz clic en Generate! y después en Download.
2.- Añadir el Script.
Ahora que ya tienes tu versión de Modernizr, necesitas añadirlo al código fuente de tu página. Usa el siguiente código dentro de la sección <head> para asegurarte de que el módulo sea cargado tan pronto como cargue la página.
|
|
<script> type="text/javascript" href="/scripts/modernizr.js"</script>
|
3.- Usar la librería.
La forma más rápida de usar la librería es centrarse en estilos específicos usando los elementos HTML. Esto te permite restringir partes del código CSS a navegadores que soportan código específico. Si estas usando JavaScript en tu web, puedes probar propiedades individuales de cada objeto de Modernizar con un valor booleano – true significa que el navegador soporta la propiedad.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>
.no-csscolums body{
/* este navegador no soporta columnas CSS */
}
</style>
<script>
if (Modernizr.touch){
//el navegador soporta eventos touch, asi que ejecuta el código de esta sección
}else{
//el navegador no soporta eventos touch, ejecuta esta alternativa
}
</script>
|
Usar los resultados de tus test.
Tan pronto como incluyas la librería en tu página, los test se ejecutan y el resultado se guarda en el objeto JavaScript de Modernizr, junto con una serie de elementos HTML indicando soporte para cada una de las propiedades testeadas en el test. ¿Qué hacemos con esta información?
Personalizar el CSS.
Para los cambios de CSS, es tan fácil como establecer una serie de reglas alternativas enfocadas a los navegadores que no soportan la propiedad en cuestión. Por ejemplo, podrías tener una serie de reglas con una CSS transition para navegadores que soportan la animación, y una segunda serie para los que no la soportan.
El selector CSS para esas animaciones sería:
|
|
.cssanimations[tus selectores]{
//aqui propiedades CSS
}
|
Mientras que para los navegadores que no soportan las animaciones se aplicará:
|
|
.no-cssanimations[tus selectores]{
//aquí propiedades CSS
}
|
Personalización de Scripts.
No todo se puede manejar sólo con CSS. En el ejemplo de arriba donde creábamos una alternativa para una animación CSS, JavaScript puede ser una buena solución también. Podríamos usar una animación CSS si el navegador lo soporta, y si no lo hace usar una animación en Jquery.
|
|
$(".no-cssanimations[tus selectores]").each(function(){
//código de la animación Jquery
}
|
Una alternativa es usar el objeto Modernizr para recuperar el estado de soporte para una propiedad en particular. En el caso de geolocation por ejemplo, puedes añadir una clausula condicional en tu script como esta:
|
|
if(Modernizr.geolocation){
//Este código funciona sólo en navegadores que soportan geolocation
}
|
Personalización CSS y Script.
Si necesitas personalizar ambos, tus scripts y tu CSS, puedes usar na combinación de los métodos comentados arriba. Esto es particularmente útil si quieres usar un único archivo JavaScript y un único archivo CSS en tu web.
Cargar condicionalmente estilos y scripts.
Si eres capaz de separar tu código en secciones, añadir
YepNote te permite cargar los recursos condicionalmente como resultado de cada test. El mayor beneficio es no cargar todas las opciones para cada navegador, sólo las propiedades necesarias para las propiedades no soportadas. Explicaré cómo usar YepNote con Modernizr en un nuevo post.
Mejor que reinventar la rueda cada vez que necesitas arreglar una propiedad, el equipo de Modernizr ha recopilado una
lista de arreglos pre-construidos, categorizados por propiedad.
Cargar archivos CSS y JavaScript con Modernizr.
Modernizr tiene un práctico método de carga, que puedes incluir en tu web. El método puede mejorar la velocidad de descarga de tu web, además de cargar condicionalmente los recursos según las capacidades del navegador.
La sintaxis básica para cargar un archivo CSS o JavaScript usando Modernizr.load es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
Modernizr.load([
//objeto de la lista
{
test : Modernizr.canvas && Modernizr.cssgradients,
//Se pueden cargar varios recursos en cada condición
//Si la condición no se cumple, entonces se cargan 2 archivos
nope : ['presentacion-arreglo.js', 'presentacion.css']
},
{
//
test : Modernizr.JSON,
nope : 'arreglos-operativos.js',
//Estos recursos se cargaran independientemente del resultado
regardless of the result:
both : ['app.js', 'extra.js'],
complete : function(){
/* Ejecuta esto despúes de que todo se haya cargado y ejecutado */
myApp.init();
}
},
// Ejecuta el análisis una vez ha terminado con lo demás
'post-analytics.js'
]);
|
Verás que el último elemento de este objeto es un simple archivo. Si no hay test, este archivo simplemente se cargará, permitiéndote equilibrar la carga de recursos hasta que tu código se ejecute. Esto optimiza el tiempo de carga de tu web.
Crear tus propios test.
La API de Modernizr proporciona acceso directo a muchos métodos útiles que puedes usar para añadir tus propios tests.
Este es el ejemplo que proporcionan en la documentación de la librería. Esto te permite añadir test para propiedades experimentales que no están disponibles en todos los navegadores.
