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.
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]-->
Créditos: Ricardo Arrigoni |
0 comentários:
Postar um comentário