viernes, enero 07, 2011

Javascript - Usando el objeto navegador para detectar un cliente Firefox


"Si usa algún código del siguiente tutorial, den el icono de ME GUSTA del Facebook que se encuentra en su mano derecha, para que se vuelva Seguidor del Blog y también comentenos que tal les pareció el tutorial"

El objeto navegador resulta muy útil a la hora de utilizar elementos dependientes del navegador. Por ejemplo los div flotantes. Uno de los objetivos de cualquier diseñador que se respete será mantener la característica de multiplataforma en una página web. Sin embargo, como podemos ver, hay elementos que lucen bien en un navegador web X, pero que al ser interpretados por un navegador web Y se distorsionan, mueven de posición, alteran otros elementos, etc.
Para empezar, y para no perder los modales, vamos a dar los respectivos créditos a nuestra fuente. Como bien dice el título de este post, usaremos Mozilla Firefox como ejemplo de navegador cliente. Si quieren saber cómo detectar otros navegadores, recomendamos visitar la fuente antes citada.
Conozcamos las propiedades del objeto navegador:

PropiedadesDescripción
appCodeNameEl nombre en clave del navegador.
appNameEl nombre del navegador.
appVersionInformación de la versión para el navegador
cookieEnabledBooleano que indica si el navegador tiene las cookies habilitadas.
languageDevuelve el idioma predeterminado de la versión del navegador.
mimeTypes[]Un conjunto de todos los tipos MIME soportados por el cliente.
platform[]La plataforma de la computadora del cliente.
pluginsUn conjunto de todos los plug-ins instalados actualmente en el cliente.
systemLanguageDevuelve el idioma por defecto del sistema operativo.
userAgentCadena que se pasa por el navegador como agente de cabecera del usuario.
userLanguageDevuelve la configuración de idioma preferido de usuario.

En Firefox 2.0.0.13 por ejemplo, la propiedad userAgent dice lo siguiente:
UserAgent:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13
Como verán, al final de la cadena se encuentra el cliente navegador y su versión (Firefox/2.0.0.13). Lo que nos interesa de momento es obtener la versión. Es decir, en número después de "Firefox/2.0.0.13". En este caso hemos utilizado Expresiones Regulares, pero hay más formas de conseguirlo:

<script type="text/javascript">
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //prueba para Firefox/x.x o Firefox x.x (ignorando los números restantes);
 var ffversion=new Number(RegExp.$1) //capturamos la x.x y la almacenamos como un número
 if (ffversion>=3)
  document.write("Estás usando Firefox 3.x o superior!")
 else if (ffversion>=2)
  document.write("Estás usando Firefox 2.x")
 else if (ffversion>=1)
  document.write("Estás usando Firefox 1.x")
}
else
 document.write("No estás usando Firefox")
</script>
Nótese que con esta expresión regular "/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)" no estamos capturando todos los números de la versión (por ejm: 2.0.0.13), sino únicamente los dos primeros dígitos (por ejm: 2.0).
Ahora, para dar una solución práctica al problema mencionado al principio de este post, debemos incrustar el html necesario para utilización de las css.

<script type="text/javascript">
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
 var ffversion=new Number(RegExp.$1)
 if (ffversion>=3)
  document.write("<style type='text/css'>.cuadro{background-color: red; color: white;} </style>") //para FF 3.x o superior
 else if (ffversion>=2)
  document.write("<style type='text/css'>.cuadro{background-color: blue; color: white;}</style>") //para FF 2.x
 else if (ffversion>=1)
  document.write("<style type='text/css'>.cuadro{background-color: yellow; color: white;}</style>") //para FF 1.x
}
else
 document.write("<style type='text/css'>.cuadro{background-color: black; color:yellow;}</style>") //para otros navegadores web
</script>
De este modo, si cuando por ejemplo inserte texto en un div de esta manera: "<div class='cuadro'>Hola mundo xD</div>", tendrá un color de fondo diferente en cada versión de Firefox. Eso no es todo, también podemos sustituír el "<style type 'text/css'>...</style>" por un "<link rel="stylesheet" type="text/css" href="ruta_hoja_de_estilo.css" />" y de esa forma aplicar formato a los elementos dependiendo de cada versión de Firefox.

0 comentarios: