Sirikon's Lab

El Desarrollador sin Fronteras: Modernizr

Jun 05, ’14

Es habitual que empecemos un nuevo proyecto y nos demos cuenta un poco tarde del millón de cosas que hay que cambiar para que éste funcione en todos los navegadores o al menos cubrir un 90% del mercado.

Podemos encontrarnos con CSS que funciona en Chrome pero no en Firefox (o que funciona al revés, wtf), elementos HTML que se tragan todos excepto Internet Explorer, ausencias o diferencias entre las APIs Javascript, o sabiendo que X navegador tiene Y característica que el resto no tienen queremos aprovecharla cuando se pueda y en los demás implementar algun fallback.

Si queremos controlar todo eso necesitamos tirar de sucios trucos de CSS, evitar etiquetas HTML5 reemplazándolas con etiquetas antiguas y tener que diferenciar en qué navegador estamos con cada script.

Cuando nos preguntan si nuestro proyecto funciona perfecto en todos los navegadores posibles, si es responsive, aprovecha características BETA cuando las hay y a demás te hace la cena.

Para todos estos casos es casi obligatorio utilizar alguna de las herramientas que os contaré a lo largo de esta serie de posts, empecemos por una con mucho renombre:

Modernizr

Esta librería te transforma en un maldito hipster nos permite controlar todos los casos que os comentaba al principio, ya que nos echa una mano en CSS y Javascript.

CSS

Modernizr, al iniciar la página, añadirá al elemento <HTML> numerosas clases, estas clases nos indican si el navegador en el que estamos cuenta o no con algunas características.

Pongamos que tenemos unas cajas en nuestra web muy bonitas que tienen una ligera sombra, creada utilizando box-shadow:

El problema se presenta cuando queremos que, aunque la sombra no sea exactamente igual, aparezca algo parecido a una sombra cuando estemos en un navegador que no soporte los box-shadow, por ejemplo una simulada con border:

Ahora, aprovechando Modernizr, y teniendo en cuenta que estará presente la clase boxshadow en navegadores copatibles y la clase no-boxshadow en navegadores no compatibles, la forma de hacer esto sería la siguiente:

Javascript

Modernizr nos ahorrará también mucho trabajo a la hora de detectar características disponibles en el navegador que estamos visualizando nuestra app, habilitando una serie de variables booleanas que serán true cuando la característica esté disponible y false cuando no.

/* ... */

// Utilizando WebSockets sólo cuando estén disponibles
if(Modernizr.websockets){
    IniciarWebSockets();
}else{
    IniciarHTTPPolling();
}

/* ... */

Esto nos sirve para una gran variedad de características, si queréis empaparos más de las bondades de esta librería, visitad su página web: modernizr.com

Happy Coding!

comments powered by Disqus

Carlos Fernández Llamas

Development Advisor @ Plain Concepts


Prizes

1 Jammer's Certificate Of Honour @ Global Game Jam 2017 Bilbao - Who Let The Waves Out
1 Premio del Público de Gamepolis y MalagaJam 2015 - Luxury Madness
4 Megathon España 2013 - GiftWish
1 Megathon Málaga 2013 - GiftWish

Lectures & Workshops


My CV

cv.sirikon.me