Tableless

Busca Menu

Identificando os IEs

Seja o primeiro a comentar por

Os browsers caminham para um status interessantes. Os usuários estão cada vez mais utilizando browsers mais atuais e espertos. Considere um vencedor se você não precisa mais desenvolver para IE8 e só foca seu esforço para desenvolver acima do IE9. Acontece que uma hora ou outra você vai precisar fixar alguns erros em browsers antigos. Seu cliente vai pedir, seu chefe vai chorar ou qualquer outro motivo vai te fazer resolver um bugzinho no IE7.

Aqui vai uma dica simples que pode salvar seu dia: adicione uma classe na tag HTML identificando o browser, assim você poderá direcionar um código para este browser específico. Fazemos isso com um código simples em Javascript ou JQuery. Veja abaixo:

Versão 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>

Versão 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");
    }
}

Eu prefiro usar isso a ter que usar CSS Hacks ou ter que usar comentários condicionais para adicionar uma classe na tag HTML. Assim nós precisamos sujar a sintaxe do CSS e quando quisermos retirar esse código adicional e nem sujamos muito no código HTML. Com comentários condicionais ficaria assim:

<!--[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 lang="pt-br">
<!--<![endif]-->

Eu acho melhor utilizar os comentários condicionais para separar os arquivos de CSS. Assim:

<!--[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 rel="stylesheet" type="text/css" href="application.css" />
<!--<![endif]-->

Guerra contra o Terror

Preparamos um PDF que te ajuda a convencer clientes e chefes tontos mostrando as deficiencias de suportarmos browsers antigos. Dá uma olhada aqui.

Publicado no dia