Click aquÃ
Si eres diseñador y tu paciencia con los diferentes exploradores y sus distintas formas de interpretar el CSS ha llegado a su lÃmite, tengo algo que mostrarte, y es que, ¿que me dirÃas si te digo que existe una forma de colocar una página de estilos distinta para cada explorador?
Pues existe, se puede hacer usando una sentencia muy sencilla en JavaScript o desde tu código fuente en el servidor. Os muestro cómo:
Desde JavaScript, ideal en páginas estáticas
Para hacerlo desde JavaScript aprovecharemos la capacidad del mismo para recorrer los objetos de la página, y a través de la cual puedes cambiar sus distintos valores, de forma que, si en la etiqueta de inclusión de la hoja de estilos establecemos un ID, podemos cambiar la ruta al mismo en función del explorador que el usuario esté utilizando:
<link rel="stylesheet" type="text/css" href="hoja.css" id="css">
<script type="text/javascript" language="JavaScript"> if (navigator.appName.indexOf("Microsoft Internet Explorer") !=-1) { document.getElementById("css").href= "cssIE.css";
} else {
document.getElementById("css").href= "cssFire.css"; }
</script>
Por supuesto, hay que hacer una llamada a la función en el onLoad del body, y puedes meter mas condicionales para mas tipos de explorador, utiliza la instrucción alert(navigator.appName); para saber el appName de cada uno de ellos. No olvides que es recomendable meter las funciones JavaScript en archivos externos y realizar una llamada, muy útil sobretodo si, como en este caso, pretendes reutilizarla en muchas páginas del site.
Al generar la página en el servidor
Pero si utilizar JavaScript no te convence o te parece arriesgado (el usuario podrÃa tenerlo desactivado) siempre te queda la opción de realizar esta operación en el servidor, utilizando el lenguaje de servidor que tengas para generar tus páginas dinamicamente. Por ejemplo, en ASP.Net utilizarÃamos lo siguiente:
Page_Load (...)
If Request.UserAgent.StartsWith("Mozilla") Then
Me.EtiquetaCSS.Attributes("href") = "estilosMZ.css"
Elseif Request.UserAgent.Contains("Internet Explorer") Then
Me.EtiquetaCSS.Attributes("href") = "estilosIE.css"
End If
//Para que funcione, habremos colocado la id "EtiquetaCSS" y la
// propiedad runat="server" en la etiqueta de inclusión del CSS:
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" runat="server" id="EtiquetaCSS"/>
El resto de lenguajes también incorporan formas de hacer esto mismo, pero tendrás que buscar en Google o entre sus librerÃas ya que de memoria no puedo decirte cómo.
Otras opciones
Si lo que quieres no es cambiar toda la página de estilos, sino tan sólo el estilo de un objeto o una propiedad, puedes hacerlo a través de JavaScript con un par de instrucciones sencillas. Accediendo al style del objeto y luego a la propiedad que deseas cambiar (como en el ejemplo de arriba) o cambiando el estilo al que tiene acceso:
function CambiarEstilo(){
//Para cambiar todo el estilo del objeto:
document.getElementById('elemento').className='nuevoEstilo';
//Si en cambio sólo queremos cambiar una propiedad:
document.getElementById('Elemento').style.propiedad='nuevoValor';
Propiedad: cualquiera de las de css (color,background,border,margin,padding,...)
}
Bueno, pues eso es todo, pronto entenderéis que esto es mas útil de lo que parece, y acabaréis utilizándolo…





Gracias Ruben, ahora mismo lo pongo en practica