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”:

¿Por qué añadir esta etiqueta?

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:

¿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
Acceder