Como fazer o IE exibir melhor o meu site?

O Internet Explorer é um dos browsers mais antigos e já foi largamente utilizado por vários usuários. Ainda hoje muitas pessoas usam o Internet Explorer, inclusive nas versões anteriores como a 6, 7 e 8.

Esse browser evoluiu junto com a Web, sendo atualizado no decorrer dos anos mas sempre buscando manter compatibilidade com versões mais antigas. Muito disso era para garantir que conteúdo HTML e CSS escritos fora dos padrões ou em um padrão antigo pudessem ser visualizados.

O resultado disso é que o IE possui várias versões de modos de renderização, os chamados document modes, que refletem a evolução do navegador. Portanto, quando o IE vai mostrar um site para o usuário, ele deve verificar o código e aplicar critérios para definir como a página será exibida, selecionando a versão mais apropriada. E isto afeta tanto o desempenho como também os recursos disponíveis no site.

No artigo “Mudanças de compatibilidade do IE por versão”, a Microsoft descreve as mudanças que ocorreram nas diferentes versões do IE, citando recursos adicionados e outros que se tornaram obsoletos.

E mesmo que o usuário tenha uma versão mais recente do Internet Explorer, pode acontecer do site ser exibido usando o document mode do IE5, por exemplo.

Na documentação “Document Modes”, a Microsoft lista os document modes por versão do Internet Explorer, sendo o IE5 denominado Quirks Mode. Segue lista do IE11 e do Microsoft Edge:

Internet Explorer 11 for Windows 10

  • Quirks Mode
  • IE7 Mode
  • IE8 Mode
  • IE9 Mode
  • IE10 Mode
  • IE11 Mode, também chamado de Edge

Microsoft Edge

  • EdgeHTML Mode

Observe que no Microsoft Edge não temos os diversos document modes que existem no IE.

Detectando como o IE exibe minha página

As últimas versões do Internet Explorer dispõem de um recurso que permite identificar qual o document mode que o IE identificou para o meu site. E este recurso está disponível na ferramenta do desenvolvedor:

iermodes_detectingrmode

No exemplo acima temos um conteúdo que é exibido usando a renderização do IE5 (Quirks Mode).

O que define o modo de renderização no IE?

São vários os aspectos que o IE usa para definir como uma página será exibida (ver mais detalhes nesse link). Mas os principais são:

  • presença ou não do DOCTYPE
  • presença ou não da tag de compatibilidade X-UA-Compatible (até a versão IE 10)

Outro aspecto que é levado em consideração é a lista de compatibilidade. Um determinado site pode estar inserido nessa lista, forçando sua visualização num modo de renderização mais antigo.

Essa lista pode tanto ser definida no lado do usuário (normalmente uma lista controlada pela empresa) como também na Microsoft. Mais informações sobre lista de compatibilidade podem ser encontradas no artigo “Noções básicas sobre a lista do modo de exibição de Compatibilidade”.

Exemplo de página associada ao IE5

O código abaixo é associado e então exibido usando o IE5, mesmo especificando a opção "IE=EmulateIE9". Isso porque o Doctype não está definido no documento.

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
    <title>IE Quirks</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
  </head>
  <body>    
  </body>
</html>

O que devo fazer para o IE exibir melhor meu site?

O ideal seria atualizarmos nossos sites todos para que sejam associados com o document mode Edge. Garantimos assim um melhor desempenho e disponibilidade de recursos modernos.

  1. O primeiro passo é usarmos o DOCTYPE do HTML5. Especificar logo na primeira linha do seu documento HTML.
    <!DOCTYPE html>
    
  2. Evitar o uso do X-UA-Compatibility. No Microsoft Edge ele é ignorado. Além disso, essa tag é um indício de que seu site ainda está usando recursos não aderentes com a Web Moderna.

    Uma opção disponível no IE11 é o Enterprise Mode que é uma solução principalmente para empresas com sites que dependem de uma determinada versão do IE. Ele permite visualizar um site com melhor desempenho e segurança e ainda assim continuar usando recursos já obsoletos no IE11.

  3. Atualizar bibliotecas Javascript utilizadas pelo site.
  4. Evitar uso de recursos como Flash e ActiveX.

Aliás, conforme visto no nosso post “Sites na Modern Web”, a Microsoft disponibiliza a ferramenta Site scan que permite analisar o seu site e indicar se o modo de renderização está na versão atual (Edge), ou se está associado com uma versão anterior. Além disso, serão fornecidas outras dicas e recomendações para melhorar o seu site.

Está tentando atualizar seu site e está com dúvidas ou precisa de mais dicas? Comente aqui ou faça uma pergunta no Stack Overflow em Português com a tag “microsoft-edge”. E continue nos acompanhando no talkitbr.

Anúncios

Deixe um comentário

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