10 de julho de 2012 Browsers

Identificando os IEs

Utilize dois modos simples para identificar os IEs em seus projetos.

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.

gilbras

Errata: No código para jQuery o if do IE6 está add classe de IE8.
gilbras

O que acha desse código em jQuery:

if ($.browser.msie) {
$(“html”).addClass(“ie”+parseInt($.browser.version));
}

http://pastebin.com/efM1JdVK
http://twitter.com/ghoren Rafael Martins

Eu to bem satisfeito com IE9 e 10, e não to nem aí pro IE8 pra traz. Aliás o 8 tem mais diferenças mesmo é na renderização de tabelas, que vc é obrigado a definir as larguras de todas as células, se não quiser ser surpreendido, e como quase não as uso…
gilbras

a versão 8 ainda representa a maior parcela de usuários das versões do IE, cerca de 50%, contra 40% da versão 9.
Acho aceitável ignorar do IE7 pra trás, o 8 ainda vai viver por muito tempo, enquanto existir o WinXP.
Lol

versão profissional:

é ie? foda-se essa merda vou colocar border-radius nessa bagaça e acabouse…
Aeciotr

Pode colocar Border Radius com tanto que use o CSS PIE ! hauhauahuahau
Fer Schio

Okay… Estava procurando por isso agora mesmo, desisti e adicionei um JavaScript de compatibilidade canvas pra todos os IEs mesmo. Ai entrei aqui por outro motivo e dei de cara com isso! HAHAHAHAHA XP

Mas… Como eu uso? //Não me matem, não tenho culpa que não tem conteúdo de HTML5 para leigos! (¬¬)
Felipe Brasil

o que vcs acham deste podemos identificar todos. mas no exemplo colocar para acrescentar a class apenas para o IE colocando dentro do if !IE para os IES.
http://tcelestino.com.br Tiago Celestino

usando o modernizr, ele cria as classes no , dai tem como fazer via css as correções dos benditos IECA.

Um exemplo que sempre uso: no-rgba hahahaha
Tiago

É só colocar esse código ? Ou é preciso criar também um CSS a parte ?
Mateus Ávila Isidoro

Oi Tiago. Aqueles arquivos servem para tu botar em cada script. Se é javascript, tu bota um dos dois primeiros. Se é css, tu usa aqueles comentários condicionais. Os comentários condicionais podem ser usados para criar códigos exclusivos para o IE.
zullcore

Uso plugin Selector Browser (uns 15kb) que poe classe engine, versao navegador e SO ou Mobile.
Tiago

Legal, mais se for tags de Html5 ex: …. Uso qual ?
Thadeu Esteves

Gosto de usar assim, fazendo isso simplifico mais o codigo e o runtime do JS.
basicamente faz a mesma no qual o Diego criou, porém , mais limpo rsrs..

var de = document.documentElement ,
ua = navigator.userAgent ,
ie = (/msies(d)/.test(ua.toLowerCase())) ? de.className = ‘ie ie’ + RegExp.$1 : ”;
Vinícius Moraes de Araújo

Acho que a melhor opção são os comentários no HTML, não consigo concordar na utilização de JavaScript apenas para isso. E na versão 1.9 do jQuery o “$.browser” foi removido.

Tableless

Identificando os IEs

Guerra contra o Terror

Mais artigos