Estilos distintos para cada navegador

  • Por
Unos scripts que nos permiten aplicarle estilos distintos a los elementos de la página, en uno de los casos apoyándonos en la tecnología CSS para aumentar la potencia.
Gracias a una consulta en nuestra lista de correo de una persona que quería colocar un fondo de pantalla distinto dependiendo del tipo de navegador se nos han ocurrido un par se scripts que pueden servir para el taller de Javascript.

Se trata unos script que permiten mostrar estilos en la página web dependiendo del navegador con el que se accede a la página, de modo que si un usuario entra con Iexplorer vería un fondo, tipografías y otros elementos con formas o estilos distintos de los que vería otro usuario que ha accedido con Netscape.

Nota: Este artículo hace una distinción de navegadores entre Netscape 4 y otros, para colocar una hoja de estilos distinta en cada caso. El artículo en si está bien, pero la detección del browser está poco actualizada, debido a que ahora hay muchos otros navegadores y nuevas versiones que no se tenían en cuenta.

Hemos publicado otro artículo para enlazar una hoja de estilos para cada navegador detectando navegadores más modernos, que será de interesante lectura para los interesados.

Empezamos por el ejemplo exacto que nos pedía el suscriptor de la lista de correo, para poner tan sólo fondos distintos. Es un script bastante específico por lo que muchos de vosotros lo encontraréis inservible, pero por lo menos servirá para aprender alguna cosilla.

Con la etiqueta <BODY>

La primera idea que se me ha ocurrido es escribir la etiqueta <BODY> entera dentro de un bloque de script donde tenemos un if que nos permite distinguir entre navegadores.

El código queda algo así:

<html>
<head>
    <title>Fondos distintos para cada navegador</title>
</head>

<script language="JavaScript">
if (document.layers)
    document.write ("<body background=nts.jpg>")
else
    document.write ("<body background=ie.jpg>")
</script>

</body>
</html>


Vemos que para averiguar si tenemos Netscape o Internet Explorer accedemos al objeto layers del documento. Como sólo Netscape tiene ese objeto, sólo para Netscape esa evaluación será verdadera. Esto es un truco rápido, aunque se debería estudiar a parte porque no funciona bien con todos los navegadores, por ejemplo, Netscape 6 mostraría el fondo de Explorer. Más bien, solo distingue entre Netscape 4 y todos los demás navegadores, ya que ciertamente, ese objeto sólo está disponible en ese navegador.

Pero a lo que íbamos, en el ejemplo, dependiendo si se utiliza Netscape 4 u otro navegador se muestra una etiqueta <BODY> con un atributo, el de la imagen de fondo, distinto.

Este ejemplo se puede ver en funcionamiento, pero recuerda que debes entrar con Netscape 4 y otros navegadores distintos para que se muestren los efectos.

Con estilos

Hay otra manera de asignar fondos distintos dependiendo del navegador y no sólo los fondos sino también tipos de letra, tamaños y en general todo lo que se puede definir utilizando los estilos CSS.

En este ejemplo suponemos que sabes algo de CSS y la definición de estilos para todo un sitio incluida en un archivo externo con sintaxis CSS. Para conocer las CSS tenemos un excelente manual en DesarrolloWeb.com.

La base del ejemplo es la misma, utilizamos un bloque script en el que averiguamos qué navegador se está utilizando y dependiendo de el navegador se muestra una etiqueta con unos atributos u otros. En concreto la etiqueta que colocamos dinámicamente en función del navegador es <LINK> que sirve para incluir una declaración de estilos externa.

Sería algo así:

<html>
<head>
    <title>Enlazo con estilos dinamicamente</title>
<script LANGUAGE="JavaScript">
if (document.layers) {
    document.write("<LINK REL='stylesheet' HREF='estilo_nt.css' TYPE='text/css'>"); }
else {
    document.write("<LINK REL='stylesheet' HREF='estilo_ie.css' TYPE='text/css'>"); }
</script>
</head>

<body>

<h1>Bienvenidos a mi página</h1>

</body>
</html>


Como vemos, en caso de estar en Netscape 4 se cargará la hoja de estilos llamada "estilo_nt.css" y si nuestro navegador es otro cualquiera se cargará "estilo_ie.css".

Este segundo caso se puede utilizar para muchas cosas. Principalmente se puede utilizar para evitar un efecto que hay en el uso de distintos navegadores, que consiste en que a misma definición de fuentes los tamaños de las mismas en Netscape e Internet Explorer difieren. (Las mismas fuentes, en Netscape salen más pequeñas que en Explorer). Es por ello que incluyendo una hoja de estilos distinta se puede poner los tamaños de las fuentes deseados para cada navegador.

Se puede ver este script en marcha para comprobar el efecto producido por los estilos distintos dependiendo del navegador.

Eso es todo. Esperemos que os den ideas estos scripts para resolver vuestros problemas.

Sólo comentar de nuevo que hemos publicado una actualización del artículo para tratar de detectar más tipos de navegadores y en distintas versiones y asignarles una hoja de estilos css distinta.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

iPhase

22/11/2001
Ante todo mis más sinceras gracias por la ayuda recibida....
He estado haciendo alguna prueba, y al final opté por un script que manda al visitante a una página u otra dependiendo del navegador
Se puede ver aquí el script:

<script language="JavaScript">
<!--

//Cargar la página según el explorador
if (navigator.appName == "Netscape"){
   window.location.href="Netscape/Introduccion.htm"}
else if (navigator.appName.indexOf("Explorer") != -1) {
   window.location.href="Introduccion.htm"}

//-->
</script>


Haciendo algunas pruebas me funciona el Netscape 6.2 , el Mozilla y el Explorer 6.x , pero el Opera ( si alguien tiene la posibilidad, que mire www.iberhack.8m.com/Introduccion.htm con un Opera y verá com se ve - Fatáaal - ) no hace ni caso del script ya que este mismo ( el script ) interpreta al navegador Opera como un Internet Explorer .... Alguna sugerencia ?

Miguel Angel Alvarez

22/11/2001
Es tu decisión y la respeto, porque funciona. Sin embargo, en mi opinión y en la de muchos otros desarrolladores, no es una buena técnica hacer dos páginas distintas, sino es mejor hacer una página que se vea bien en todos los navegadores.

Algunas desventajas de hacer una página para cada navegador son las siguientes:

  • Tienes que programar o diseñar dos veces
  • Si actualizas una página también tienes que hacerlo dos veces.
  • A la hora de registrar en buscadores ¿que registras la versión Explorer o la Netscape? Puedes registrar sólo la portada-redireccionadora, pero eso no es eficiente. Deberías tener el script redireccionador en cada uno de las páginas del sitio.
Seguro que me he dejado más desventajas, pero es suficiente. Para sitios pequeños todavía funcionaría, sin embargo, en sitios grandes es impensable hacer dos versiones. Si en desarrolloweb tuvieramos una versión para Netscape y otra para explorer sería una ruina: Mucho más trabajo, espacio en disco...

jabe

01/2/2008
lo mejor es saber qué navegador es y luego añadirle el estilo necesario para cada uno (explorer o firefox, etc...)

Por ejemplo esto me vino bien para mi pagina en una galeria de imagenes, para saber qué imagen era mas ancha que alta, y ponerle un estilo y centrarla dentro de un marco, y cuando la imagen es mas alta que ancha para darle otro estilo y centrarla tambien dentro del marco, espero que os sirva,

<script language="javascript">
d = document.getElementById("galeria_fotos")
e = document.images
for (x=0; x < e.length; x++) {
if (document.images[x].id=="galeria") {
if (document.images[x].width > document.images[x].height) {
document.images[x].width="122"
document.images[x].height="82"
if (navigator.appName == "Netscape"){
document.images[x].style.padding="28px 0px 40px 0px"}
else if (navigator.appName.indexOf("Explorer") != -1) {
document.images[x].style.padding="28px 4px 40px 17px"}
} else {
document.images[x].height="122"
document.images[x].width="82"
if (navigator.appName == "Netscape"){
document.images[x].style.padding="8px 0px 0px 0px"}
else if (navigator.appName.indexOf("Explorer") != -1) {
document.images[x].style.padding="8px 26px 8px 37px"}
}
}
}
</script>

Un Abrazo,

JABE

Juan Andres Segreda

05/5/2009
Cuando usar una, cuando usar otra
Pues para este ejemplo, de tan solo un cambio de imagen es mejor la opcion destacada por el foro, no obstante cuando se tiene problemas con CSS mas complejos como ciertos menus dinamicos, es mejor la segunda ya que IE es muy malo en CSS y muchas veces no carga bien un scrip que en todos los otros navegadores si funciona!