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 (CSS). 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.

Afortunadamente hoy los navegadores no presentan tantas diferencias en su modo de interpretar el CSS y este problema no se suele dar tanto. Incluso para la mayoría de los problemas de compatibilidad que puede haber se recomienda usar Responsive y técnicas como Progressive Enhancement y Graceful Degradation. De todos modos no declaramos como obsoleto este artículo, aunque sí estaría en la frontera con un artículo obsoleto, porque todavía podría haber alguna circunstancia en la que queramos aplicar estilos distintos. No es mada común pero puede venir bien como práctica.

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:

Acabamos de ver que el autor d Quirksmode ahora recomienda un script más evolucionado que sería recomendable usar si necesitamos esta funcionalidad de detección de navegadores. https://whichbrowser.net/.

//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>