 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Estilos distintos para cada navegador
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.
21/11/01 - 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.
+ 3 categorias relacionadas
+ 2 comentarios (Añadir)
+ 1 comentario no revisado
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
+ Entrar en Scripts en Javascript
+ Entrar en Scripts DHTML
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 2 comentarios revisados |
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 ?
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.
 | Añadir un comentario del artículo |
| 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 |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||||
Tienda DesarrolloWeb
