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'.
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>
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)
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>
<body>
<script type="text/javascript">
setBrowserType();
detectar_navegador();
</script>
.
.
.
</body>
No es lo que no tengo. Es lo que no soy.
