Identificar o navegador e escolher arquivo CSS

[Billie_Joe 0]

Fala pessoal!

 

 

Bem, meu projeto de aprender webstandards e só desenvolver sites desta forma tá progredindo.. resolvi alguns problemas e to começando a pegar o jeito. O porém é q andei testando um dos meus projetos em sites antigos e tá dando uma p#$*& incompatibilidade.

 

Ai teste uma tag (conditional comments) pra separar o tag do IE X para o IE Y, porém acho q isso não funciona com o FF, certo?

 

Alguém sabe de uma forma efetiva de fazer essa separação!? Andei estudando as estatísticas do meu site e notei:

70% ainda usam o IE 6

20% ainda usam o IE 7

8% ainda usam FF

2% usam outros navegadores

Então preciso fazer algumas adaptações para o layout atual (q roda 100% no IE 7 e no FF) rodar de forma alternativa no IE 6. Já até criei um arquivo css alternativo porém não sei qual a melhor maneira para detectar o browser e aplicar o css adequado. PHP? Javascript? Conditional Comments? E quanto aos buscadores, isso traz algum problema?

 

Saudações a todos!!

[roberto182 0]

Boa Noite,

Segundo pesquisa Google.

 

Exemplo JavaScript (Basta alterar o código para sua aplicação.):

<script language="JavaScript1.2"><!--var nom = navigator.appName;if (nom == "Microsoft Internet Explorer"){document.write(nom)}else if (nom == "Netscape"){document.write('Seu Navegador é compatível com Netscape')}else {document.write('<a href="http://www.mozilla.org/products/firefox/">Baixe o Firefox!</a>')}//--></script>

 

Abrass,

[Billie_Joe 0]

Então Roberto, algumas dúvidas sobre esse q você postou:- teria como esse script detectar a versão do navegador? pq no caso preciso fazer um arquivo css para IE 5 e 6 e outro para o IE 7.- utilizar esse script não prejudica no caminho dos robots dentro do site?[]'s

[roberto182 0]

Acredito que não tem porque atrapalhar os robots.

 

Segue abaixo um exemplo que pega a versão do navegador.

 

function fn_GetBrowser() {          var strNav, strIE, strBrowser;        strNav = (navigator.appName == "Netscape" &&                    parseInt(navigator.appVersion) >= 3); strIE = (navigator.appName.indexOf("Microsoft") >= 0 &&parseInt(navigator.appVersion) >= 4) ; strBrowser = strNav || strIE; return strBrowser;}

 

OBS:Caso não queira colocar todo o código em seu arquivo html você pode separa-lo em um arquivo .js e depois utilizar a tag <link> para chama-lo. Depois basta chamar a função.

[Billie_Joe 0]

Bem Roberto, acabei adaptando um em PHP mesmo (não sei fazer funcionar Javascript, acredita?!?). Mas espero deixar em aberto pro pessoal postar se existe alguma melhor solução para essa questão!!

 

 

function ObterNavegador($user_agent) {	   $navegadores = array(			'Opera' => 'Opera',			'Mozilla Firefox'=> '(Firebird)|(Firefox)',			'Galeon' => 'Galeon',			'Mozilla'=>'Gecko',			'MyIE'=>'MyIE',			'Lynx' => 'Lynx',			'Netscape' => '(Mozilla/4\.75)|(Netscape6)|(Mozilla/4\.08)|(Mozilla/4\.5)|(Mozilla/4\.6)|(Mozilla/4\.79)',			'Konqueror'=>'Konqueror',			'Internet Explorer 7' => '(MSIE 7\.[0-9]+)',			'Internet Explorer 6' => '(MSIE 6\.[0-9]+)',			'Internet Explorer 5' => '(MSIE 5\.[0-9]+)',			'Internet Explorer 4' => '(MSIE 4\.[0-9]+)',			);foreach($navegadores as $navegador=>$pattern){	if (eregi($pattern, $user_agent))	return $navegador;	} return 'Desconhecido'; }

[]'s

[Giovani 104]

Eu não acho necessário fazer verificação de navegador. Um bom código css elimina a maoria dos problemas, basta estudar bastante.Calro, alguns, poucos, hacks, ou comentário condicionais poderão ser usados.Mas reitero, não existe a necessidade de verificar o navegador X e chamar o estilo X, verificar o navegador Y e chamar o estilo Y. É perder tempo, e principalmente, dinheiro.Mas essa é a minha opinião.

[Billie_Joe 0]

Gio, mas nem pra versões anteriores?!? Aquele novo visual do site q estou montando fica todo quebrado no IE 6. E pelo q vi é natural pq ele tem uma implementação diferente do tamanho dos divs - nele se soma os paddings ao tamanho total, e no IE 7 / FF não...Sei lá, sou novato nisso, acho besteira fazer dois css diferentes pra mesma evolução de navegador (por exemplo IE7 e FF 2), mas com os antigos fica um tanto quanto inevitável...Enfim, to trabalhando nisso e vou postando minhas dúvidas pra ver se vcs então me ajudam a sanar o problema.[]'s

[Giovani 104]

Seu que o IE6 é uma navegador ruim, mas não é preciso fazer dois, três css.

Basta estudar, pesquisar, por a mão na massa.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[claujohnson 0]

Prezado Billie Joe,

 

Eu concordo com o Gio, da pra resolver isso no css, e você não precisa fazer as folhas completas, basta colocar nas outras folhas apenas as declarações especificas para os browser que estão nos comentários condicionais. Como você disse que ta funcionando belezinha no FF e IE7 poderia colocar um comentário condicional para o browsers IE6 e inferiores. Olha só um exemplo de como eu resolví isso digitando pouco nas outras folhas css:

 

Funcionando certinho no IE7:

 

padrao.css

 

#principal { width: 380px; height: 400px; padding:0 10px 0 10px; backgrond:#069; border:1px solid #FFF; }

Para funcionar no IE6:

 

ie6.css

 

#principal { width: 400; }

Viu como é simples? Não precisa colocar a linha inteira, nem o código inteiro. Pegue apenas o que o IE6 ou inferior precisa para funcionar igual e coloque na folha css alternativa.

 

Para mais detlahes sobre os Conditional Comments: http://revolucao.etc.br/archives/category/hacks/

 

Clau Johnson

[Billie_Joe 0]

É isso mesmo Clau!! A idéia é essa!! Acho q falamos quase a mesma língua, já que eu considero o conditional comments um "detector de browser" tb. Vou ler esse link q você enviou e fazer mais alguns testes. Valeu![]'s

[Giovani 104]

Bom, eu já opiniei nesse tópico.

Acho desnecessário fazer mais de uma folha de estilos, mas essa é minha opinião.

 

Façam como bem entender.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif