Desenvolvimento - Javascript

Identificando o navegador do usuário com Javascript, jQuery e CSS

Veja neste artigo como você pode identificar o navegador que todo usuário que visite seu site esteja usando. Mostrarei como fazer isso com javascript, jQuery e CSS.

por Ricardo Arrigoni


Olá pessoal, hoje vou compartilhar uma “quick-tip” com vocês. O artigo vai ser bem pequeno, eu confesso rs, mas espero que seja bem útil para nossos leitores.

No artigo de hoje vou mostrar como fazer para identificar qual browser o seu usuário está usando.

Vamos ao código:

Listagem 1: Código em Javascript

<script type="text/javascript">
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
 var ieversion=new Number(RegExp.$1)
 if (ieversion>=8)
     // Para IE8
     document.getElementsByTagName('html')[0].className+='ie8';
 else if (ieversion>=7)
     // Para IE7
     document.getElementsByTagName('html')[0].className+='ie7';
 else if (ieversion>=6)
     // Para IE6
     document.getElementsByTagName('html')[0].className+='ie6';
}
</script>

Listagem 2: Código em jQuery

if ($.browser.msie) {
    if(parseInt($.browser.version) == 8){
         // Para IE8
         $("html").addClass("ie8");
    } else if(parseInt($.browser.version) == 7){
         // Para IE7
         $("html").addClass("ie7");
    } else if(parseInt($.browser.version) == 6){
         // Para IE6
         $("html").addClass("ie6");
    }
}

Além dessas duas opções, existem os comentários condicionais em html e CSS. Essa opção acaba “sujando” um pouco o código, mas vou disponibilizar o código para ajudar quem prefira usar.

Listagem 3: Comentário condicional css.

<!--[if IE 6]>
<html lang="pt-br" class="ie6">
<![endif]-->

<!--[if IE 7]>
<html lang="pt-br" class="ie7">
<![endif]-->

<!--[if IE 8]>
<html lang="pt-br" class="ie8">
<![endif]-->

<!--[if gte IE 8]>
<html lang="pt-br" class="ie9">
<![endif]-->

<!--[if !IE]><!-->
<html <http://december.com/html/4/element/html.html> lang="pt-br">
<!--<![endif]-->

Nesse caso se você escolher usar comentários condicionais você terá que estilizar essas classes usando os arquivos .css específicos para cada browser.

Nota: No caso dos comentários condicionais eu recomendo criar um arquivo css para cada navegador específico, fica mais limpo o código e mais fácil na hora de editar.

Listagem 4: Comentários condicionais com css específico

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->

<!--[if !IE]><!-->
<link <http://december.com/html/4/element/link.html> rel="stylesheet" type="text/css" href="application.css" />
<!--<![endif]-->

Bom pessoal, espero que tenham gostado do artigo e que ele seja útil para vocês, assim como é útil para mim :)

Um abraço e até a próxima.

Ricardo Arrigoni - SEO Manager.
Ricardo Arrigoni

Ricardo Arrigoni - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.