Detecção de browser, comentários condicionais e o fim do “<!–[if gt"

Há muito tempo que a comunidade de front-end developers utiliza a famosíssima tag de comentário condicional para detecção de browser. Um exemplo para ilustrarmos:

<!–[if lte IE8]>
<p>Você está utilizando um browser muito antigo! Atualize para garantir que tudo funcione adequadamente.</p>
<![endif]–>

Este é um exemplo de comentário condicional. Aqui estamos instruindo o browser a, caso sua versão seja igual ou menor do que o Microsoft Internet Explorer 8, exibir a mensagem do elemento <p>.

Para quem saber o que significa esta sintaxe, temos um comentário HTML comum seguido pela expressão [if lte IE8]. O “if” é auto explicável.  O “lt” é a abreviação de “lower than” (menor do que) e o “e” é abreviação de “equal” (igual). Ou seja, a expressão pode ser lida exatamente como “se menor ou igual ao internet explorer 8”. Se quiser saber mais sobre este negócio de comentário condicional, leia este artigo.

Uma coisa que uma boa parte dos desenvolvedores não conhece é que esta instrução através de comentário condicional só funciona no Internet Explorer… Quer dizer, funcionava… A partir da versão 10, o Internet Explorer passou a tratar o bloco assim como os demais browser: apenas como um comentário. E está correto – a Microsoft vem limpando “os fantasmas” do passado, o que é digno de nota.

Enfim, para o contexto do exemplo, ainda é válido utilizar a instrução – visto que a ideia é instruir o browser a fazer algo somente nas versões mais antigas do Internet Explorer, geralmente por falta de compatibilidade/padrões.

Restou alguma alternativa? Bem, a Microsoft ainda não removeu a compilação condicional via Javascript – uma conhecida como @cc_on. Este funciona em todas as versões do Internet Explorer, mesmo a 10. A ideia é parecida com os comentários condições, só que no Javascript:

<script>if(Function(‘/*@cc_on return document.documentMode <= 10@*/’)()){alert(‘Você está utilizando um browser que não suportamos! Saia do Internet Explorer!.’);}</script>

Mas fico me perguntando se o próximo Internet Explorer irá manter a funcionalidade…

Tem mais alguma alternativa?

Alguns dirão para usarem o jQuery, mas infelizmente o suporte ao método parou na versão 1.9 e o mesmo foi removido nas versões posteriores. Na época era só fazer isto:

if (jQuery.browser.msie && jQuery.browser.version < 10) {
// seu código
}

E agora? Um usuário do StackOverflow postou algo simples, porém funcional: investigar o user agent! Como eu não tinha pensado nisto?

Lá no Javascript, existe o objeto navigator que tem o método userAgent. Daí é só fazer o match e trazer o resultado (com o substring, você também consegue trazer a versão)! Veja só:

<script>document.write(navigator.userAgent);</script>

Isto irá trazer todo o userAgent… Porém, vamos perguntar apenas se o browser é o IE:

<script>document.write(navigator.userAgent.match(/MSIE/) != null);</script>

Pronto! Eu achei o máximo! Simples, sem utilização de frameworks e direto ao ponto.

Além disto, podemos utilizar em outros browsers. Vamos verificar se o browser do usuário é o Google Chrome?

<script>document.write(navigator.userAgent.match(/Chrome/) != null);</script>

Eu curti bastante. Fica a dica para vocês.

Etiquetado , , , , ,

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: