25

2

Cuando usar y cuando no Modernizr

Modernizr es una librería (escrita en JavaScript) que nos ayuda a detectar que funcionalidades tiene o no tiene nuestro navegador, y a partir de ahí realizar una acción u otra en nuestro código.
La cuestión está en: ¿Cuándo usar Modernizr y cuanto no? esa es la pregunta de Diana Aceves, y vamos a ver distintas formas de implementar esta misma funcionalidad sin necesitar Modernizr (como con el uso de @support).

Para empezar, esta librería sin duda es la mejor en ese cometido y no es excesivamente grande, por lo que para ahorrarte tiempo bajo mi punto de vista no pasaría nada por usarla, pero si quieres reducir el tamaño al máximo de tu web puede que no sea necesario añadir la librería entera y se pueda optar por otras alternativas.

¿Cuando no se debería usar?

Eso depende de las necesidades, hice una crítica similar sobre jQuery y ambas librerías o frameworks son estupendos, pero los desarrolladores debemos de saber cuando no es necesario añadir archivos de más en nuestros proyectos.

Por poner un ejemplo, si vamos a hacer una página de inicio que tiene una música de fondo, o un vídeo (ambos con las etiquetas multimedia de HTML5, para este cometido) puede que muchos navegadores no lo lean, con Modernizr detectaríamos si el navegador puede usar estos elementos, pero si es solo eso, podemos hacerlo nosotros mismos con un pequeño código JavaScript.

Hay métodos distintos para saber si se admite una función u otra, por poner un par de ejemplos simple añadiré el código para detectar si hay soporte para canvas y otro para detectar el soporte de sombras en el texto (text-shadow).

1. // Detectamos si está disponible Canvas
2. function D_canvas(){ return !!document.body.createElement("canvas").getContext }
4. // Detectamos si está disponible text-shadow
5. function D_textShadow(){ return typeof document.body.style.textShadow != "undefined" }

Alternativas en el futuro

El Modernizr del futuro ya está cerca, que es @support, la forma fácil de aplicar estilos según las funciones que soporta el navegador (aunque solo sirve para estilos) pero solo con CSS, y actuaría prácticamente igual que @media y os explicaré más a fondo su fácil funcionamiento dentro de poco.