Mootools: reconociendo el browser

13/feb/2008 12

La idea de un framework es reordenar un lenguaje y entregarnos herramientas para que sea bastante más fácil nuestro desarrollo. Una de ellas, es el reconocimiento del browser del usuario. En 2monos quise hacer lo mejor de lo mejor, pero lamentablemente IE6 no me acompañó en este camino. En vez de desgastarme tratando de que por lo menos se viera algo decente, o funcione a medias…. preferí abolirlo de una vez por todas. Si entras a 2monos.net utilizando IE6, una ventana te indicará que mejor bajes Firefox. Lamentablemente esta es una acción que por más que lo deseemos no se puede ejecutar en todos los sitios web en que trabajamos, pero en este caso como este sitio es mío, hago lo que quiero y decidí por discriminar un browser que nunca debería haber sido una mayoría.

Para esto, con Mootools es extremadamente fácil. Primero, creamos el evento inicial que gatillará la acción cuando los elementos del HTML (DOM) estén cargados. Luego, una codicional (if/else) que me dirá si el browser es IE6, ejecuta tal acción:

window.addEvent('domready', function(){
     if(window.ie6){
          // haz algo aquí
     }
});

Ver ejemplo

A seguir, una lista de las posibilidades de browsers a ser detectables:

  • window: cualquier browser.
  • window.ie: cualquier Internet Explorer.
  • window.ie6: sólo IE6.
  • window.ie7: sólo IE7.
  • window.gecko: Mozilla Firefox u otro browser que use gecko (Netscape 6+, Flock, Camino, Galeon, Epiphany).
  • window.webkit: Apple Safari u otro que use Webkit (iCab, Konqueror, Omniweb, Shiira, Sunrise).
  • window.webkit419: Apple Safari 2.
  • window.webkit420: Apple Safari 3.
  • window.opera: sólo Opera.

Link

Comentarios

  1. Gabriel Porras [#]

    Eso eso eso…

    En el último desarrollo que hice pensé lo mismo…
    Y cuando alguien entra con IE6 le pongo un mensaje que dice: Apreciado visitante: Está navegando con una versión antigua de Internet Explorer. Le recomendamos que actualice a la última versión o utilice otro navegador (Firefox, Safari, Opera, Flock…) para mejorar el desempeño del sitio y en general de su experiencia en Internet.

    Jejeje… ¿Cuándo será que dejamos de ver ese trasto?

    Saludos!

  2. Fabian Ramirez [#]

    Excelente, pero mootools es para otra cosaaaaaaaa .. mucho mas que detectar un navegador :) ..

    Me encantó tu sitio y increible que exista gente tan buena como tu maquetando y diseñando (“Lo dice un hombre de backend que tambien maquetea, pero no diseña”).

    Saludos

  3. CSSLab Admin [#]

    Gabriel: buen mensaje me gusto su contenido. Fabian: con estos pequeños articulos sobre mootools pretendo mostrar algunos de sus usos en el sitio de 2monos, y como es facil su sintaxis en vez de hacerlo con JS puro. gracias por tus elogios, estoy para servir. Salu2 a ambos y gracias por tomarse el tiempo de comentar.

  4. Victor San Martin [#]

    Iniciando una lata IE6, los que hablan de usabilidad y accesibilidad de mas que estarían en contra de la decisión que tomaste, pero que le vamos a hacer IE6 es una porquería y muchas veces para hacer trabajos buenos, nos cuesta lidiar con este navegador.

    Ahora como dice Fabián mootools da para mucho mas, pero esta muy bueno que empieces con ejemplos así de básicos, y espero mas artículos de estos. (en lo personal me manejo con otros frameworks javascript – que no mencionaré – pero obviamente conozco mootools y me interesa conocerlo mas).

    Saludos y excelente blog.

  5. jose roberto (vevni) [#]

    si, lo que intenta hacer jorge aqui es ir mostrando poco a poco las cosas que se pueden hacer con este framework, pues si bien con js puro tendrias que validar por ejemplo lo tipico con getelements u otra funcion, recordar que algunos navegadores solo soportan ciertas funciones y algunos no, con js harias esto y algunos if o switch, lo cual con mootols te facilita pues solo llamas la sentencia correspondiente al navegador, aunque veamos facil la implementacion y preguntemos que tanta potencia puede tener esto?….. estas opciones = son usadas por el propio framework para poder hacer del mismo crossbrowser y sea lo mas compatible posible con todos los navegadores…. saludos!

  6. CSSLab Admin [#]

    Exacto Jose. La idea detras de Mootools y otros frameworks es facilitar el trabajo del desarrrollador, dedicandose solo a crear interaccion y dejar de pensar en q si funcionara bien en todos los browsers, ya q de por si son crossbrowser. Esos sitios q solo abren popup’s en IE, o q los forms no funcionan en Safari, son un buen ejemplo de ello.

  7. stock [#]

    Para la versión 1.2 cambio un poco, vale la pena darle un vistaso http://docs12b.mootools.net/Core/Browser

    Saludos :)

  8. Snorky [#]

    Estupendo! Gracias.

    Hay alguna manera para hacer la misma función con javascript?

    I hate I.E * !!

    Salu2!

  9. ZoiX [#]

    Hola. Muy buen tip, pero la razón de mi comentario es sobre 2monos.
    ¿Podría usar el Modal Window para un proyecto personal?
    ¿Hay algún tipo de licencia o de destricciones?
    Muchas gracias.

  10. Jorge Epuñan [#]

    ZoiX, todo lo q hago y publico aqui es por el bien de la humanidad, asi q por favor, usalo sin problemas, y difundelo! El proceso final de la ventana modal con CSS esta en un articulo anterior. exito, y muestra el resultado final!

  11. ZoiX [#]

    Jorge, muchsa gracias… ya vendré de nuevo a comentar cómo ha resultado… en este momento un compañero de mi blog intenta acoplarlo a mootools 1.2… ya te contaré…

  12. Zero [#]

    No coincido en rendirse y no hacer compatible un sitio hasta con IE6, no me gusta pero es mayoria… casi 40% de gente que entra a mi sitio lo usa asi que con ayuda de mootools es compatible y se ve bien el site tambien

Responder a ZoiX ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab