 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Definir un archivo de estilos CSS para cada navegador con Javascript
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.
01/5/07 - 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.
+ 2 categorias relacionadas
+ 4 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
+ Entrar en CSS
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
 | Añadir un comentario del artículo |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
