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.

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.

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

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

El código queda algo así:



    Fondos distintos para cada navegador


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 con un atributo, el de la imagen de fondo, distinto.

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 que sirve para incluir una declaración de estilos externa.

Sería algo así:



    Enlazo con estilos dinamicamente

Bienvenidos a mi página


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.