Modos de renderização ‘Standards mode’ vs ‘Quirks mode’

Postado em 4 de janeiro de 2010 por Alexandre Broggio

Um navegador de web tem no mínimo dois modos de exibição das paginas ou modos de renderização,  que o navegador escolhe a partir de declaração de uma DTD (Doctype) no documento que seja valida, ou seja (escrita corretamente).

Com base na DTD o navegador ira renderizar a pagina em

- Modo padrão ( Standards mode ) – Modo correto de o navegador exibe a pagina conforme as especificações do DTD (Doctype) declarado no documento. Este modo segue os padrões descritos no W3C.
- Modo não padrão (Quirks  mode) – o navegador exibe a pagina de uma forma mais vaga que poder gerar resultados inesperados, pois este modo emula o comportamentos de navegadores mais antigos.
Escolher um modo de renderização pelo DTD( Doctype ) de um documento e chamando de alternância (switching) de DOCTYPE ou indetificação (sniffing) de DOCTYPE. Abaixo como deve ser um Box model rendeizado corretamente

Box model

Abaixo os códigos HTML e CSS  para você ver os resultados da imagem que esta logo abaixo dos códigos.

Código CSS

<style type="text/css">
body {
	font-size: 25px;
}
p {
	font-size: 50%;
}
h1 {
	font-size: 16px;
}
div {
	margin: 20px;
	width: 170px;
	padding: 50px;
	border: 6px solid #F00;
}
table, td, th {
	border:1px solid #333;
	text-align:left;
}
</style>

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>xhtml document</title>
</head>
<body>
<h1>Teste</h1>
<div>
  <p> 'Standards mode'  vs  'Quirks  mode' </p>
</div>
<table>
  <thead><tr><th colspan="2">Titulo da tabela</th></tr></thead>
  <tfoot><tr><th colspan="2">Rodapé</th></tr></tfoot>
  <tbody>
    <tr>
      <td><p>Texto da tag p.</p></td>
      <td><p>texto da tag p.</p></td>
    </tr>
    <tr>
      <td>Conteúdo.</td>
      <td>Conteúdo.</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Código renderizado em modo padrão Standards mode com DTD(Doctype)
stander mode

Ja aqui o mesmo código renderizado mas em modo não padrão ‘Quirks mode’ sem o DTD(Doctype)

Quicks mode

Aqui uma outra comparação de entre box model padrão e um quebrado

comparacao de box model

Caso querira se aprofundar mais no assunto alguns links que lhe sera útil

http://www.w3.org/International/articles/serving-xhtml/Overview.en.php#quirks
http://en.wikipedia.org/wiki/Quirks_mode
http://www.communitymx.com/content/article.cfm?cid=85fee
https://developer.mozilla.org/en/Mozilla%27s_DOCTYPE_sniffing
http://www.cssnewbie.com/standards-vs-quirks-mode/
http://www.w3.org/TR/CSS2/box.html

Usei também como referência o livro Criando páginas web com css.



Comentário fechado