Un script en Javascript que detecta el navegador del visitante

Esta utilidad es muy recurrida y preguntada, debido a que los navegadores a menudo interpretan de manera distinta algunos atributos de hojas de estilo. Con ello ocurre que una página con estilos CSS no se ve exactamente igual en un navegador que otra. Por ello una solución podría ser incluir una declaración de estilos específica para cada explorador de cada usuario que nos visite.

Ahora bien, no siempre es una buena idea proporcionar una hoja de estilos para cada navegador: Es laborioso crear las distintas hojas de estilo y luego es difícil de mantener el código. Si salen nuevos navegadores o no identificamos bien el que nos visita podemos mostrar una página con estilos optimizados para otras plataformas. Lo ideal es tener una hoja de estilos que funcione bien en todos los navegadores, o tener un par de hojas de estilo, una para navegadores habituales y otra para dispositivos móviles, por ejemplo. Siempre podemos construir la página con una declaración de estilos compatible y a menudo existen algunos trucos para que todo se vea más o menos igual en los navegadores más habituales.

Este tema ya lo tratamos en un artículo antiguo del taller de Javascript: Estilos distintos para cada navegador , lo que ocurre es que en ese artículo hicimos una detección del navegador que hoy no sirve, después de la aparición de nuevos Browser y nuevas versiones.

Ahora la detección del navegador la vamos a dejar a cargo de un script más complejo, que nos informa bien sobre los distintos programas y versiones. El script de detección del navegador no es nuestro, lo hemos obtenido de una página web donde tratan el tema con detalle: http://www.quirksmode.org/js/detect.html . Este script para detección del navegador crea un objeto con tres propiedades que podemos utilizar de la siguiente manera para obtener información sobre el cliente:

//muestro el navegador
document.write("Tu navegador: ");
document.write(BrowserDetect.browser);
document.write(" / ");
document.write(BrowserDetect.version);
document.write(" / ");
document.write(BrowserDetect.OS);

Nosotros hemos utilizado ese objeto resultado de la detección del navegador para crear una estructura de if, con la que poder aplicar unas cuantas hojas de estilo dependiendo de varios posibles navegadores.

if (BrowserDetect.browser == "Firefox") {
    document.write("<LINK REL='stylesheet' HREF='estilo_firefox.css' TYPE='text/css'>");
}
else {
    if (BrowserDetect.browser == "Explorer"){
       if (BrowserDetect.version>=7){
          document.write("<LINK REL='stylesheet' HREF='estilo_ie7.css' TYPE='text/css'>");
       }else{
          document.write("<LINK REL='stylesheet' HREF='estilo_ie6.css' TYPE='text/css'>");
       }
    }else{
       if (BrowserDetect.browser == "Opera"){
          if (BrowserDetect.version<9){
             document.write("<LINK REL='stylesheet' HREF='estilo_opera.css' TYPE='text/css'>");
          }else{
             document.write("<LINK REL='stylesheet' HREF='estilo_opera9.css' TYPE='text/css'>");
          }
       }else{
          document.write("<LINK REL='stylesheet' HREF='estilo_otros.css' TYPE='text/css'>");
       }
    }
}

Usuarios que han visto este tema también han visto...

- Las funciones trigonométricas en Javascript
- Compactando código javascript
- Detectar el idioma y país del usuario con Javascript
- Evitar el Reenvío de Formularios con JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento