Micaela 24 de Noviembre de 2009 a las 11.27
   Imprimir artículo
elWebmaster.com

Modernizr: Javascript para evadir incompatibilidades entre navegadores


modernizrExiste una nueva herramienta llamada Modernizr que lleg√≥ para hacer que nuestra vida como dise√Īadores web sea un poquito m√°s f√°cil.

En la nota de de hoy te ense√Īaremos c√≥mo aplicar este √ļtil script para lograr el m√°ximo efecto en tu sitio. ¬°Esperamos que te sea de utilidad!

Descripción General

Aunque el uso de CSS3 ha ido aumentando entre los dise√Īadores web, el soporte de los distintos navegadores para algunas de sus funcionalidades es todav√≠a inexistente. Modernizr se utiliza para atender a aquellos navegadores que no soportan determinadas propiedades CSS3 y hace que el desarrollo sea mucho m√°s f√°cil porque as√≠ sabemos qu√© le estamos brindando a estos navegadores con menos posibilidades una experiencia alternativa, en lugar de ignorarlos. Tengan en mente (y esto est√° indicado incluso en la portada del sitio oficial) que Modernizr no habilita m√°gicamente estas propiedades para los navegadores que no las admiten. Simplemente le dice a la p√°gina si esta funci√≥n es compatible con el navegador ¬†que el usuario est√° usando o no.

Cómo funciona

Para instalar Modernizr, descarga el archivo de su p√°gina oficial. Luego, en la etiqueta HEAD de tu sitio, a√Īade un link al archivo. Por ejemplo:

  1. <script src="js/modernizr-1.0.min.js"></script>

El segundo paso es incluir en tu etiqueta HTML una clase de "no-js":

  1. [/html]
  2. <h2>¬ŅPor qu√© a√Īadir esta etiqueta?</h2>
  3. Porque ese ser√° el estado por defecto de la p√°gina. Si JavaScript (js) no est√° activado, entonces Modernizr no funcionar√° (y probablemente otras caracter√≠sticas de tu sitio tampoco lo har√°n) por lo que es √ļtil tener un fallback para estos casos.  Si el JavaScript est√° habilitado, una vez que la p√°gina se cargue en el navegador, esa clase ser√° reemplazada din√°micamente y lucir√° parecida a esto:
  4.  
  5. [html]

¬ŅQu√© quiere decir esto? Echemos un vistazo

En este caso, hemos abierto la p√°gina en Firefox 3.5. Este navegador (lamentablemente) no soporta la funcionalidad de fondos m√ļltiples, gradientes CSS o transformaciones CSS, por lo tanto, los resultados de Modernizr ser√°n "no-multipebgs", "no-cssgradients" y "no-csstransforms". Por otra parte, s√≠ soporta canvas y border-radius, lo que explica "canvas" y "borderradius".

Cómo utilizar esta preciada información

Por lo tanto ¬ŅQu√© podemos hacer con esto? Se pueden llegar a preguntar de qu√© forma los ayuda. Miremos el ejemplo:

Fondos m√ļltiples

Has construido el fondo de tu sitio web cuidadosamente y est√°s utilizando la t√©cnica de fondos m√ļltiples para hacerlo m√°s f√°cil y r√°pido de codificar. Tu CSS lucir√° similar a este:

  1. #nice {
  2. background: url(background-one.png) top left repeat-x,
  3. url(background-two.png) bottom left repeat-x;
  4. }

Y un buen navegador mostrar√° esto:

modernizr-safari

Utilizando Modernizr, tu CSS en cambio lucirá así:

  1. #nice {
  2. background: url(background-one.png) top left repeat-x;
  3. }
  4. .multiplebgs #nice {
  5. background: url(background-one.png) top left repeat-x,
  6. url(background-two.png) bottom left repeat-x;
  7. }

Esto es lo que tus visitantes obtendr√°n, dependiendo del navegador que utilicen:

d modernizr-opera

Esta es una implementación muy simplificada de Modernizr, pero esperamos que sea suficiente para mostrarles lo que pueden lograr con esta herramienta.

HTML5

Modernizr también te permite utilizar los nuevos elementos HTML5 -header, hgroup, section, footer, video, etc... - y darles estilo. Esto no quiere decir que algunos de estos elementos comenzarán a funcionar en Internet Explorer, pero puedes darle estilo para que IE los entienda y no los ignore.

JavaScript

También puedes detectar propiedades utilizando Modernizr en tu JavaScript, mediante esta sintaxis:

  1. if (Modernizr.geolocation) {
  2. }

Conclusión

Mientras no podamos confiar en el hecho de que los navegadores soporten todo el espectro completo de funcionalidades que deseamos usar, la mejor herramienta disponible es Modernizr.

Haz clic aqu√≠ para visitar el sitio oficial de Modernizr ¬Ľ

¬ŅUstedes ya la utilizan? Si no lo hacen ¬ŅC√≥mo manejan estos inconvenientes?

Fuente: Web Designer Notebook


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. Nahuel dice:

    Me parece que esta libreria no es muy buena, o tu ejemplo no es real
    Opera es 100% compatible con los estadares, los sitios que no los respetan estan mal programados.
    http://acid3.acidtests.org/

    y como comentario extra, Håkon Wium Lie, es el director técnico de la empresa Opera Software y creador del estándar web CSS
    Dudo mucho que no se esmeren para que opera sea compatible.
    Saludos.-

  2. Morton dice:

    Hola, Nahuel

    La nota no menciona a Opera. La herramienta est√° dirigida a aquellos navegadores que presentan problemas de incompatibilidades con algunas de las nuevas propiedades.

    Saludos,

  3. Nahuel dice:

    Morton,
    Fijate en el ejemplo donde dice:"Esto es lo que tus visitantes obtendr√°n, dependiendo del navegador que utilicen:"

    Abajo hay 2 imagenes, la primera dice Safari y la segundo Opera (que es la que supuestamente no funciona)
    creo que es mas que claro que induce a pensar que Opera es un navegador no compatible.

    No lo crees?

    Saludos.-

  4. Alejandra dice:

    Gracias por los comentarios. Las im√°genes fueron cambiadas para evitar confusiones y ambig√ľedades. ;)

  5. veronica dice:

    creo que el fondo todos tenemos algo que ignoramos, los navegadores hacen m√°s facil nuestra tarea, en internet, sea el navegador que tengamos, nos sirve, las innovaciones son el punto m√°s importante en los navegadores, tenemos variedad de personas, por ende, variedad de navegadores, los cononcimientos son distintos, nuestra forma de ver las cosas, nos llevan a la gran diversidad. NOSOTROS DEMANDAMOS, LAS EMPRESAS PRODUCEN.

  6. Roberto dice:

    fundamental para poder luchar contra el demonio Internet Explorer

  7. dukeneric dice:

    Estuve verificando esta librería con Google Chrome y no se comporta igual que otros navegadores.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión