Meta tags X-UA compatible e charset

Introdução

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

Você já deve saber que, com a HTML5, houve algumas pequenas melhorias para adicionar o charset e o doctype no seu documento. Antigamente era preciso decorar algo parecido com isso:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

E sem esquecer de colocar na tag <html> o atributo xmlns:

HTML

<html xmlns="https://www.w3.org/1999/xhtml" >

Coisa linda! #sqn

Hoje, para adicionar um doctype, você só precisa de:

HTML

<!DOCTYPE html>

e pronto! O mesmo problema ocorria quando precisávamos adicionar um charset ao documento. Tinhamos que escrever:

HTML

<meta http-equiv="content-type" content="text/html;charset=utf-8">

E hoje, só precisamos disso:

HTML

<meta charset="utf-8">

O que muita gente não sabe é que, para que o charset seja setado corretamente no documento, ele precisa estar nos primeiros 512b do seu documento.

Aaaahh, por isso que em alguns sites fica aparecendo uns caracteres estranhos?

Exatamente! Ou porque a meta tag está após os primeiros 512b, ou porque ela não está presente no documento. Acredite, é muito comum 😩

E como resolvemos isso?

Colocando a meta tag charset no início da seção HEAD do documento!

Aeeeee!! 🙋

Só que com isso, geramos um segundo problema.

A meta tag X-UA-Compatible

Quem já desenvolve frontend a algum tempo, sabe que o IE é o vilão da Internet! E para contornar os problemas que ele tem, podemos usar uma infinidade de hacks para manter a compatibilidade com o maior números de versões possíveis.

O IE tem uma coisa feia chamada Modo de Compatibilidade. Esse modo foi criado para dar suporte a aplicações que só funcionavam nas versões mais antigas do IE (sabe-se lá porque cargas d’água não atualizavam o diagrama da aplicação). Então, era só clicar no botão em formato de folha, que aparece na barra de endereços no IE, que ele renderizava como se fosse uma versão mais antiga.

Só que esse modo não fica aplicado somente para a aplicação selecionada. Qualquer outro endereço de site que for acessado, vai abrir com essa versão mais antiga.

Para "resolver" isso, você precisa adicionar a meta tag X-UA-Compatible na seção HEAD, dessa forma:

HTML

<meta http-equiv="X-UA-Compatible"content="IE=Edge">

Sobre a X-UA-Compatible: https://msdn.microsoft.com/en-us/library/ie/jj676915(v=vs.85).aspx

O IE=Edge diz para o IE renderizar aquela página com a versão mais recente que ele tiver. Ou seja, se o usuário clicou no modo de compatibilidade do IE9 para usar a versão 7, essa meta tag avisa que o IE deve usar sempre a versão mais recente, no caso, a 9.

Você ainda pode mudar o content dessa tag, passando a versão que você quer que o IE renderize, fazendo dessa forma (por exemplo):

HTML

<meta http-equiv="X-UA-Compatible"content="IE=8">

Isso vai dizer que o IE deve renderizar aquela página sempre como IE8 (se disponível essa versão).

Maaaas, essa metatag tem um segredo, que pouquíssimas pessoas conhecem: se ela não for colocada como PRIMEIRA TAG DENTRO DO <HEAD>, o IE simplesmente ignora ela!

Na página que descreve a metatag encontramos a seguinte recomendação:

The X-UA-Compatible header isn’t case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.

Que em tradução livre significa:

O cabeçalho X-UA-Compatible é insensível ao tamanho de caixa, contudo ele deve ser declarado na seção HEAD do documento antes de qualquer outro elemento, excetuando-se o elemento title e outros meta elementos.

Mas essa exceção, na verdade, não existe 😩

Ela precisa vir antes de todas as outras. Ou seja, se no seu site estiver assim:

<!DOCTYPE html>>
  <html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible"content="IE=Edge">

Não vai funcionar! O IE não vai nem dar bola pra ela e vai continuar no modo que o usuário deixou.
Triste, não?! 😩

O correto é marcar de acordo com o formato mostrado a seguir:

HTML

<!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="X-UA-Compatible"content="IE=Edge">
  <meta charset="utf-8">

Bom, eram essas dicas que eu queria passar passar para vocês nessa matéria:

A metatag charset deve ser declarada antes dos 512b do documento;
X-UA-Compatible deve estar marcado sempre no início da seção HEAD do documento.

Seguindo essas dicas, você não terá problemas com renderização falha por falta de declaração do charset ou com renderização em versões antigas do IE. 😊 🙆

Até a próxima!

Compartilhe essa matéria com seus amigos

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.