Definir un archivo de estilos CSS para cada navegador con Javascript

  • Por
Un script en Javascript que detecta el navegador del visitante y permite enlazar con un archivo distinto de declaraciones de estilos CSS dependiendo del browser del usuario.
Queremos dar una solución actual para las personas que desean tener varias hojas de estilos para su página y que, dependiendo del navegador del usuario, puedan enlazar con una hoja u otra.

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'>");
       }
    }
}

Como hemos podido ver, hemos incluido una estructura que detecta un navegador Firefox, un Internet Explorer versión 7, Internet Explorer versión inferior a la 7, un Opera (también con distinción de versiones) y por último un caso para todos los demás navegadores.

El código completo de la página será el siguiente:

<html>
<head>
    <title>Link con estilos dinámico</title>
<script language="Javascript">

//detección del navegador por http://www.quirksmode.org/js/detect.html

var BrowserDetect = {
       init: function () {
          this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
          this.version = this.searchVersion(navigator.userAgent)
             || this.searchVersion(navigator.appVersion)
             || "an unknown version";
          this.OS = this.searchString(this.dataOS) || "an unknown OS";
       },
    searchString: function (data) {
       for (var i=0;i<data.length;i++) {
          var dataString = data[i].string;
          var dataProp = data[i].prop;
          this.versionSearchString = data[i].versionSearch || data[i].identity;
          if (dataString) {
             if (dataString.indexOf(data[i].subString) != -1)
                return data[i].identity;
          }
          else if (dataProp)
          return data[i].identity;
       }
    },
    searchVersion: function (dataString) {
       var index = dataString.indexOf(this.versionSearchString);
       if (index == -1) return;
       return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
       { string: navigator.userAgent,
          subString: "OmniWeb",
          versionSearch: "OmniWeb/",
          identity: "OmniWeb"
       },
    {
       string: navigator.vendor,
       subString: "Apple",
       identity: "Safari"
    },
    {
       prop: window.opera,
       identity: "Opera"
    },
    {
       string: navigator.vendor,
       subString: "iCab",
       identity: "iCab"
    },
    {
       string: navigator.vendor,
       subString: "KDE",
       identity: "Konqueror"
    },
    {
       string: navigator.userAgent,
       subString: "Firefox",
       identity: "Firefox"
    },
    {
       string: navigator.vendor,
       subString: "Camino",
       identity: "Camino"
    },
    { // for newer Netscapes (6+)
       string: navigator.userAgent,
       subString: "Netscape",
       identity: "Netscape"
    },
    {
       string: navigator.userAgent,
       subString: "MSIE",
       identity: "Explorer",
       versionSearch: "MSIE"
    },
    {
       string: navigator.userAgent,
       subString: "Gecko",
       identity: "Mozilla",
       versionSearch: "rv"
    },
    { // for older Netscapes (4-)
       string: navigator.userAgent,
       subString: "Mozilla",
       identity: "Netscape",
       versionSearch: "Mozilla"
    }
    ],
    dataOS : [
    {
       string: navigator.platform,
       subString: "Win",
       identity: "Windows"
    },
    {
       string: navigator.platform,
       subString: "Mac",
       identity: "Mac"
    },
    {
       string: navigator.platform,
       subString: "Linux",
       identity: "Linux"
    }
]

};
BrowserDetect.init();

//script para poner estilos distintos para cada navegador
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'>");
       }
    }
}
</script>
</head>

<body>

<h1>Detección navegador</h1>
<script>
//muestro el navegador
document.write("Tu navegador: ");
document.write(BrowserDetect.browser);
document.write(" / ");
document.write(BrowserDetect.version);
document.write(" / ");
document.write(BrowserDetect.OS);
</script>
</body>
</html>

Se puede ver en funcionamiento en este enlace.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Erick Soto

24/6/2007
Muchas gracias por esta ayuda me sirve de mucho, pero ahora tengo un pregunta.
Ya defini un archivo css para IE7 y Mozilla pero como hago para poder asignar una clase a una palabra.

Este es mi caso:
tengo mi carpeta de estilos: css_ie7, css_mozilla.
He definido un archivo css para cada navegador pero en un archivo "detectanavegador.js" que está dentro de una carpeta javascript, y en la cabecera hago el enlace y me funciona bien. <script language="JavaScript" type="text/javascript" src="javascript/detectanavegador.js"></script>.

Me asigna los estilos para cada navegador, pero quiero hacer estilos con clases para ciertos párrafos por ejemplo:

.parrafo{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
text-align:justify;
line-height:25px;
} -->este es para el navegador IE7

.parrafo{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
text-align:justify;
} --> este es para el navegador Mozilla

Estos estilos son diferentes para cada Navegador, como lo puedo asignar por ejemplo al atributo <p> y que haga la diferencia entre navegadores.

Me pueden ayudar les agradecería mucho

estorde

22/2/2008
Esta muy bien esta opción, bajo el condicionante de que hay que usar javascript y eso no resulta del todo accesible. En <a href="http://www.disenorama.com/tutoriales/comentarios-condicionales-para-ie">este artículo</a> teneis una opción sin el uso del javascript.

T151

20/3/2008
Muy bueno el artículo pero pienso que nos puede ser de utilidad para otras cosas (conocer el explorador más usado por los usuarios de nuestra web) que no para cargar estilos diferentes, ya que deberíamos ser capaces de crear una hoja de estilos que cumpla con las normas. Mientras el IE interprete los estilos como quiera nunca podremos visualizar una página de la misma manera en todos los navegadores, pero hay soluciones más elegantes.

charasoverride

07/12/2008
Gracias por el aporte. Personalmente no me añadir mucho javascript en mi código porque puede ser bloqueado y las cosas dejas de funcionar. Para elegir el css yo utilizo la siguiente directiva:
<pre>
&lt;!--[if lte IE 6]&gt;
&lt;link href="css/ieonly.css" rel="stylesheet" type="text/css" /&gt;
&lt;![endif]--&gt;
</pre>

Juan Jose Chirino

06/6/2009
Definir un archivo de estilos CSS para cada navegador
Excelente codigo, sobre todo cuando hay que maqueta toda una pagina usando menues y apariencia en formularios y demas componentes.

sarahi

23/7/2009
Excelente tutorial!!!
=) muchas gracias de verdad! funciona a la maravillaaaa!
estuve batallando muchissimo para lograr asignar las diferentes css a la pag q estoy haciendo hasta q encontre tu articulo.
Muchas gracias!! =)

daaran

20/9/2009
Buenisimo
muchas gracias, me ha ido de lujo

Gustavo

16/1/2012
gracias
De verdad muchas gracias me sirvio muchisimo

Jashirou

07/7/2016
Excelente
Aunque el artículo ya tenga 9 años es increible que aún funcione el script jeje...

Gracias por el aporte, me sirvió de maravilla. Lamentablemente en este tiempo aún hay gente que todavía trabaja en IE8...ya es suficiente con que naveguen en IE, pero es el colmo que lo hagan en navegadores ya desfasados. Pero bueno, para eso pagan...necesitaba recrear unos estilos para IE8, y no quería cambiar las vistas de versiones posteriores ni de otros navegadores así que me tocó optar por esta opción de cambiar nada más el estilo para este navegador.

Me costó encontrar este script, pero valió la pena...excelente aporte...

Saludos!!!