Diferentes hojas de estilo, según el navegador que se está utilizando...

 

Lo que yo quería era que en función del navegador la página web utilizara una hoja de estilo diferente.

Más exactamente incluso, lo que yo quería era utilizar una hoja de estilo principal, pero luego en función del navegador que se utilizara, que aplicara una segunda hoja de estilo y que esta fuera distinta según el navegador fuera 'Firefox', 'Explorer ', 'Opera' o 'Netscape'.

Determinar cuál es el navegador que se está utilizando

Lo primero que necesitaba era un script que determinara cual era el navegador que se estaba utilizando y qué versión.

Lo encontré en foros del web:

<html>
<head>
   <script LANGUAGE = "JavaScript" >

   var  sBrowser ;
   var  sVersion ;

   function  setBrowserType (){
   var  aBrowFull  = new Array( "opera" ,  "msie" ,  "netscape" ,  "gecko" ,  "mozilla" );
   var  aBrowVers  = new Array( "opera" ,  "msie" ,  "netscape" ,  "rv" ,     "mozilla"    );
   var  aBrowAbrv  = new Array( "op" ,     "ie" ,    "ns" ,        "mo" ,     "ns"    );
   var  sInfo  =  navigator . userAgent . toLowerCase ();;

sBrowser  =  "" ;
   for (var  i  =  0 ;  i  <  aBrowFull . length ;  i ++){
   if (( sBrowser  ==  "" ) && ( sInfo . indexOf ( aBrowFull [ i ]) != - 1 )){
sBrowser  =  aBrowAbrv [ i ];
sVersion  =  String ( parseFloat ( sInfo . substr ( sInfo . indexOf ( aBrowVers [ i ]) +  aBrowVers [ i ]. length  +  1 )));
      }
     }
    }

setBrowserType ();

   function  getBrowserName (){
   return  sBrowser ;
   }

   function  getBrowserVersion (){
   return  sVersion ;
   }

</script>
  </head>
  <body>
  <script language="JavaScript">
  setBrowserType();
  document.write("Browser: " + getBrowserName() + "<br>");
  document.write("Versión: " + getBrowserVersion() + "<br><br>" );
  </script>
  </body>
</html> 

En función del navegador, utilizar una hoja de estilo diferente:

Ahora que ya podía saber qué navegador se estaba utilizando, de lo que se trataba era de en función de uno u otro utilizar una segunda hoja de estilo distinta.

En HTML para llamar a una hoja de estilo externa o a otra únicamente hay que escribir en el 'head':

<link href=".miestilo.css" rel="stylesheet" type="text/css">

Ahora bien, dentro de un script de javaScript, no podía utilizar una línea de código de XHTML:

if (sBrowser =="mo") {

XXX ---> tenía que decirle que utilizara una segunda hoja de estilo en concreto y no otra. Pero ¿cómo?...

}

Y entonces encontré este segundo 'script' en el blog Web.AR:

 

var cssNode = document . createElement ( 'link' )
cssNode.type = 'text/css'
cssNode.rel = 'stylesheet'
cssNode.href = 'http://www.somedomain.com/styles/FireFox.css'
cssNode.media = 'screen'
cssNode.title = 'dynamicLoadedSheet'
document . getElementsByTagName ( "head" )[0]. appendChild (cssNode)

 

El 'script' que utilicé finalmente, tal como quedó:

En el 'head':

<script type="text/javascript">

var sBrowser;
var sVersion;

function setBrowserType(){
var aBrowFull = new Array("opera", "msie", "netscape", "gecko", "mozilla");
var aBrowVers = new Array("opera", "msie", "netscape", "rv", "mozilla" );
var aBrowAbrv = new Array("op", "ie", "ns", "mo", "ns" );
var sInfo = navigator.userAgent.toLowerCase();;

sBrowser = "";
for (var i = 0; i < aBrowFull.length; i++){
if ((sBrowser == "") && (sInfo.indexOf(aBrowFull[i]) != -1)){
sBrowser = aBrowAbrv[i];
sVersion = String(parseFloat(sInfo.substr(sInfo.indexOf(aBrowVers[i]) + aBrowVers[i].length + 1)));
}
}
}

setBrowserType();

function getBrowserName(){
return sBrowser;
}

function getBrowserVersion(){
return sVersion;
}

function detectar_navegador () {
if (sBrowser =="mo") {

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'firefox.css';
cssNode.media = 'screen'
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);

}


if (sBrowser =="ie") {

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'explorer.css';
cssNode.media = 'screen'
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);
}

}

</script>

En el 'body':

<body>
<script type="text/javascript">
setBrowserType();
detectar_navegador();
</script>

.

.

.

</body>

No es lo que no tengo. Es lo que no soy.

icono que certifica que esta página web valida correctamente XHTML 1.1