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.
En 2022 no consideramos esta práctica válida, ya que afortunadamente a día de hoy los estándares son muy respetados en los navegadores. Dicho de otra forma, en el desarrollo actual es totalmente innecesario proporcionar un CSS distinto dependiendo del navegador. Por lo tanto, puedes entender este ejercicio solamente como una posible práctica Javascript para inyectar un CSS dependiendo de una condición cualquiera, pero en el caso del CSS la recomendación es siempre mantener una única hoja de estilos.
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.
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.
Puedes 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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...