Meta Tags X-UA-Compatible e Charset

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

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

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

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

Coisa linda! #sqn

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

1
<!DOCTYPE html>

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

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

E hoje, só precisamos disso:

1
<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 do <head>!

Aeeeee!! o/

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 a disgrama 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 no <head>, dessa forma:

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

Sobre a X-UA-Compatible: http://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):

1
<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 tag 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 fala sobre a tag, tem a seguinte citaçã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.

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:

1
2
3
4
5
6
<!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 é deixar dessa forma:

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="utf-8">
...

Bom, eram essas dicas que eu queria deixar:

  • meta charset deve estar sempre antes dos 512b do documento;
  • X-UA-Compatible sempre no início do <head>.

Fazendo isso, você não terá problemas (ao menos, não com charset ou com renderização de versões antigas do IE :P) :)

Até a próxima!

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/