Estilos diferentes para cada navegador

Scripts que nos permitem aplicar estilos diferentes aos elementos da página, em um dos casos nos apoiamos na tecnologia CSS para aumentar a potência.

Graças a um e-mail de um usuário que queria colocar um fundo de tela diferente dependendo do tipo de navegador que nos fez pensar em dois scripts que podem servir para este Workshop de Javascript.

Trata-se de uns scripts que permitem mostrar estilos na página web dependendo do navegador com o qual se acessa à página, de modo que se um usuário entra com IExplorer veria um fundo, tipografias e outros elementos com formas ou estilos diferentes dos que veria outro usuário que tenha acessado com Netscape.

Começamos pelo exemplo exato que nos pedia o usuário do e-mail, para colocar somente fundos diferentes. É um script bastante específico que para muitos de vocês parecerá "inútil", mas pelo menos servirá para aprender alguma coisinha.

Com a etiqueta <BODY>

A primeira idéia que tive foi de escrever a etiqueta <BODY> inteira dentro de um bloco de script onde temos um if que nos permite distinguir entre navegadores.

O código ficaria algo assim:

<html>
<head>
    <title>Fundos diferentes 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 se temos Netscape ou Internet Explorer acessamos ao objeto layers do documento. Como só Netscape tem esse objeto, somente para Netscape essa avaliação será verdadeira. Isto é um truque rápido, embora deveria ser estudado à parte porque não funciona bem com todos os navegadores, por exemplo, Netscape 6 mostraria o fundo de Explorer. Na verdade, só se distingue entre Netscape 4 e todos os demais navegadores, já que certamente, esse objeto só está disponível nesse navegador.

Voltando ao exemplo, dependendo se se utiliza Netscape 4 ou outro navegador se mostra uma etiqueta <BODY> com um atributo, o da imagem de fundo diferente.

Com estilos

Existe outra maneira de atribuir fundos diferentes dependendo do navegador e não só os fundos como também tipos de letra, tamanhos e em geral todo o que pode ser definido utilizando os estilos CSS.

Neste exemplo, supomos que sabe algo de CSS e da definição de estilos para todo um site incluído em um arquivo externo com sintaxe CSS. Para conhecer as CSS temos um excelente manual em CriarWeb.com.

A base do exemplo é a mesma, utilizamos um bloco script no qual averiguamos que navegador está sendo utilizando e dependendo do navegador mostra-se uma etiqueta com uns atributos ou outros. Na verdade, a etiqueta que colocamos dinamicamente em função do navegador é <LINK> que serve para incluir uma declaração de estilos externa.

Seria algo assim:

<html>
<head>
    <title>Linko com 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>Bem-vindos a minha página</h1>

</body>
</html>

Como vemos, no caso de estar em Netscape 4 se carregará a folha de estilos chamada "estilo_nt.css" e se nosso navegador é outro qualquer se carregará "estilo_ie.css".

Este segundo caso pode ser utilizado para muitas coisas. Principalmente pode-se utilizar para evitar um efeito que existe no uso de diferentes navegadores, que consiste em que na mesma definição de fontes, os tamanhos das mesmas diferem em Netscape e Internet Explorer. (As mesmas fontes, em Netscape saem menores que em Explorer). É por isso que incluindo uma folha de estilos diferente pode-se colocar os tamanhos das fontes desejados para cada navegador.

Isso é tudo. Esperemos que estes scripts dêem idéias para resolver outros problemas.