Poderiam me informar qual é a função dessa meta tag dentro de um documento HTML?
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEsta meta é exclusiva para Internet Explorer (introduzido no IE8), ela pode configurar a página para ser renderizada como em outra versão do Internet Explorer.
Note que se estiver usando IE9 ou 10 por exemplo com doctype para HTML5:
<!DOCTYPE html>
<html>
O Internet Explorer não suporta o doctype para HTML5, então provavelmente ele vai acabar indo para um modo chamado Quirks Mode.
O Quirks mode faz o site ser interpretado como uma versão mais antiga do IE, o que pode fazer teu site falhar, então ao ao usar X-UA-Compatible
com o valor IE=edge
ele vai forçar o navegador renderizar com a mais recente.
Existem diversos valores além do IE=edge
IE=5
que é praticamente o Quirks ModeIE=7
que faz renderizar como IE7IE=8
que faz renderizar como IE8IE=9
que faz renderizar como IE9IE=10
que faz renderizar como IE10IE=11
que faz renderizar como IE11IE=edge
faz renderizar com o modo mais alto suportado pelo navegador, por exemplo se usa o IE10 ele vai forçar renderizar como IE10IE=EmulateIE7
se o doctype definido for valido/reconhecido ele renderiza como IE7, caso contrário renderiza como Quirks ModeIE=EmulateIE8
se o doctype definido for valido/reconhecido ele renderiza como IE8, caso contrário renderiza como Quirks ModeIE=EmulateIE9
se o doctype definido for valido/reconhecido ele renderiza como IE9, caso contrário renderiza como Quirks ModeIE=EmulateIE10
se o doctype definido for valido/reconhecido ele renderiza como IE10, caso contrário renderiza como Quirks ModeIE=EmulateIE11
se o doctype definido for valido/reconhecido ele renderiza como IE11, caso contrário renderiza como Quirks ModeE lembrando, se não definir o X-UA-Compatible
e usar o doctype para HTML5 o Internet Explorer vai trabalhar como Quirks Mode
Notas:
A partir do IE11 esta meta-tag é considerada obsoleta, mas não é necessário remove-la, não irá afetar o comportamento em navegadores que não usam mais ela
O DOCTYPE que significa DOCument TYPE (tipo de documento) e é uma declaração que deve ir no começo do documento sem que haja nenhum tipo de espaço antes (pode até eventualmente funcionar em alguns navegadores com espaços antes, mas no geral não deve haver espaçamentos), ele define o tipo de documento e não é usado apenas por HTML, alguns tipos de XML como SVG também o usam, mas como estamos falando de HTML vou apenas citar os exemplos que foram mais usados e conhecidos.
Nota: se a página não tiver nenhum doctype, sendo para HTML4 ou 5 ela vai renderizar como Quirks mode ou Standard Mode (um tipo de Quirks mode do navegador Firefox e de outros navegadores que usam o motor Gecko)
Até alguns anos atrás usávamos o HTML4.01, não quer dizer que porque hoje temos o 5, que ele não funciona, ele o 4.01 é totalmente funcional e não há problema algum em usar, o mitos da internet vão dizer que HTML5 é melhor para o Google, mas isso não passa de mito, o ROBÔ do Google é muito inteligente e interpreta a páginas por uma série de fatores, mas não vou entrar em detalhes.
Falando sobre o HTML4.01, ele tinha 4 tipos de DOCTYPE que visavam melhorar a renderização para o tipo de necessidade:
É usado para forçar o documento ser o mais correto/estrito, forçando a página a evitar vários atributos e tags, ou seja era bem menos permissivo, mas isso na verdade era uma grande vantagem, se você conseguir criar um site que valide 100% (ou perto disto) com ele, então você poderia ter certeza de que seu site ao menos em questão de HTML seria bem renderizado em diversos navegadores, claro que tudo pode ter uma exceção, mas ainda sim este era o propósito, eu pessoalmente devo dizer que este é o meu doctype preferido até hoje
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Talvez fosse o mais comum talvez do HTML4.01, ele inclui tanto os elementos estruturais com os elementos de apresentação, ele era mais permissivo para ajudar a manter compatibilidade entre navegadores e versões
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
É usado para quando se trabalha com frames (não iframes), aonde será necessário a tag <frame>
(e <frameset>
):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Os frames eram um conjuntos de páginas que eram carregadas cada uma em seu quadro, um exemplo retirado do https://www.w3.org/TR/html401/present/frames.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Exemplo de Iframe</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
Seu navegador não suporta frames
</NOFRAMES>
</FRAMESET>
</HTML>
Além do HTML4.01 existia o XHTML1.0, o XHTML suportava mesclagem de HTML e Xml, os HTMLs são poderiam ter falhas nas tags (o que hoje ainda é um pouco comum ocorre por falha de desenvolvedores web) e as tags como <br>
e <input>
sempre deveriam ter />
, assim:
<input type="text" name="exemplo" value="" />
<br />
O Xhtml1.0 tinha os mesmos doctypes do HTML4.01, no entanto mudavam um pouco:
DTD XHTML Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DTD XHTML Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTD XHTML Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
A quebra de linha na verdade é opcional, creio que as pessoas faziam isto apenas para facilitar a "legibilidade" do código
Com a chegada do HTML5 passamos a ter um doctype único, o <!DOCTYPE html>
, passamos a não ter mais que diferenciar entre HTML e XHTML, ou seja passou a aceitar tags que terminem assim <img src="">
ou assim <img src="" />
, passou também a suportar a inclusão de qualquer tag, ela sendo uma tag valida ou não e de XML (que geralmente as tags são customizadas por quem criou o XML), um exemplo de Xml é o SVG (imagem vetorial):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Olá mundo!</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>
</svg>
</body>
</html>
No entanto não é porque navegadores modernos começaram a implementar o HTML5 que significa que navegadores mais antigos como o muito usado na época IE8, 9 e 10 iriam suportar sozinho esta doctype, então a solução encontrada foi usar o X-UA-Compatible, claro que não quer dizer que tags HTML5 iriam funcionar, isto só impedia do navegador ir para o modo IE=5 (Quirks mode), para que o IE suporta-se tags como <section>
, <footer>
e <nav>
era necessário algumas coisas extras que eram uma combinação de JavaScript com CSS, um exemplo básico seria isto:
<style>
section, footer, nav {
display: block;
}
</style>
<script>
var tags = [ "section", "footer", "nav" ];
for (var i = 0, j = tags.length; i < j; i++) {
document.createElement(tags[i]);
}
</script>
Acredite o document.createElement
fazia com que o navegador passasse a reconhecer as tags e assim era possível aplicar o CSS, claro que com o tempo veio técnicas mais confiáveis como html5shiv, que foi criado por um desenvolvedor, basta adicionar em sua página assim:
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
Como ainda existe alguns usuários de IE, então muitos sites ainda fazem uso do html5shiv
height=100%
automático e a questão do px
opcional no transitional, HTML4 foi uma época de sofrimento xD
2/06/2017 às 20:39