por Diego Eis
Março 7th, 2005
Um assunto meio complexo e interessante que muita gente se confundi na hora de entender. Doctypes e os modes dos browsers.
Acho que todos já ouviram falar em Box Model, não é?
Pois então… Alguns browsers calculam as medidas no CSS de um jeito particular, calculam do jeito antigo, errado, causando esse tipo de problema.
Muitos fizeram sites enquantos os browsers calculavam do jeito errado. Logo, os desenvolvedores dos browsers ficaram num dilema: Se eles resolvessem o “bug” de cálculo, muitos sites iriam parar de funcionar corretamente…
Resolveram criar um tipo de chaveamento para os browsers.
Hoje, os browsers atuais, funcionam do jeito antigo e do jeito certo, tudo depende do Doctype.
O jeito antigo é chamado de “Quirks Mode” e o jeito novo chama-se “Strict Mode” ou “Standard Mode”.
Para começar, se os browsers não encontram nenhum tipo de Doctype na página, o Internet Explorer e o Opera funcionam em “Quirks Mode”. Mas o Mozilla (e genéricos) funcionam em “Strict Mode”.
Se os browsers encontram um Doctype, como por exemplo, de HTML 3.0, eles funcionam “Quirks Mode”. Se encontram um Doctype mais novo, como XHTML ou até mesmo o HTML 4, eles funcionam em “Strict Mode”.
Abaixo, segue uma tabelinha para facilitar as coisas.
| Navegador |
S / DOCTYPE |
C / DOCTYPE |
C / prolog |
| IE 6 |
Quirks |
Strict |
Quirks |
| IE 5 |
Quirks |
Quirks |
Quirks |
| Opera |
Quirks |
Strict |
Strict |
| Mozilla |
Quirks |
Strict |
Strict |
| IE 5 Mac |
Quirks |
Strict |
Strict |
Alguns “poréns”:
Embora o Mozilla funcione em “Quirks Mode” sem o Doctype, ele calcula o Box Model da maneira correta.
Lembrando que há mais diferenças entre o “Quirks Mode” e o “Strict Mode”.
O Ie5, sempre se comportará do jeito antigo. O Ie6, se colocarmos o Prolog XML, ignora o Doctype (não importa qual seja) e passa a se comportar em “Quirks Mode”.
Eu, particularmente, recomendo colocar o Prolog XML, para fazer o Ie6 se comportar em Quirks Mode. Se eu precisar ajeitar o layout nos Ie’s, eu coloco um CSS Hack e resolve o problema.
Mais sobre esse assunto:
Se ainda estiver interessado, leia também:
Este post foi criado
na Segunda-feira, Março 7th, 2005 às 00:00 e está arquivado em Browsers, Geral.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
Interessante este assunto, porém eu descarto o uso do prologo, pois no IE sempre tenho problemas com ele - o mais recente foi alterar a largura de uma tabala. Antes de usar o prologo ela estava na largura correta (100%), depois que usei o prologo ela ficou com 70%, passei 2 horas para descobrir o problema…
Olá agora que eu tenho uma base dos doctypes eu queria todos os exemplos das linhas doctype e quando usar um e outrom pode postar todos doctype completos ?
AH! Então era pra isso!!!
Nao entendi qual a vantagem de forçar o IE a trabalhar em quirks? Ao invés de aproveitar sua "capacidade" de trabalhar em strict.
A vantagem é que você iguala todos os IEs, assim não precisa fazer ajustes (hacks) pra IE 5 e IE 6, faz só pra IE 5, já que o IE6 vai funcionar como ele. 
.
Que confusão, espero que entendam. heheheh.
Ainda não entendi como na prática funciona isto!
Vc tem, na prática, 3 "modes":
- Quirks (Ie5);
- Strict Piorado (Ie6);
- Strict (Mozila);
Então, se vc faz um site, tem q usar hacks pro Strick com defeitos do IE6 e pro Quirks do IE 5. Usando o prologo, o IE6 se comporta como o IE5. Dessa forma, vc vai fazer hacks apenas pra um mode (quirks).
se vc naum estah confuso eh pq naum estah prestando atençao
gostaria de ver os códigos para fazer isto.
Bem renato, eu acredito que talvez não tenha me expressado corretamente, mas ainda acredito que o que eu disse, na prática, funciona.
Mas ainda acho que a lógica de usar o prologo xml ainda é a mesma que eu citei.
isto que seria o tal prólogo xml: <?xml version="1.0" encoding="iso-8859-1"?>
mas e no meu caso, que trabalho com php?
eu tenho o msm problema que o Leandro. Se uso o prolog <?xml … dá pau com PHP… e ae como fica?
Minha recomendação é: não use prolog, a não ser que você precise dele. Escreva hacks para o IE5 somente.
Mas, se alguém tiver que usar prolog, usando php:
<? echo ‘<?xml version="1.0" encoding="iso-8859-1"?’ .’>’ ?>
Alguns desenvolvedores importantes já estão abandonando o desenvolvimento para IE5 [http://37signals.com/svn/archives2/2005/03/driving_the_sta.php], como a 37signals, por exemplo.
Mas, é claro, essa decisão deve ser tomada puramente com base nas estatísticas de acesso do SEU site.
Então se os IE’s forem igualados digamos assim…
"
Newton Wagner disse:
site
A vantagem é que você iguala todos os IEs, assim não precisa fazer ajustes (hacks) pra IE 5 e IE 6, faz só pra IE 5, já que o IE6 vai funcionar como ele. .
Que confusão, espero que entendam. heheheh.
"
ñ vou ter problemas com a visualização de versões diferente??? estou desenvolvendo um site para F.F e fazendo Hacks para o IE6… mas quando visualizo no IE5 por exemplo… tem uma diferença considerável… a mesma coisa acontece quando visualizo meu site em versão anterior ao FF q utilizo… agora ñ sei pq….
Ola
por favor
eu uso um sistema feito em PHP/Mysql (so pra variar) que gera xml e utiliso xsl pra transformar o xml em xhtml, dessa forma o prologo aparece de qualquer forma, entao a duvida he o seguinte, tem como mesmo colocando o prologo, setar o IE para o modo strict ?
Faz pouco tempo que entrei no mundo de desenvolvimento web com padrões…
Antes desenvolvia do jeito que viesse, mas estou encantado com os webstandards.
Muito interessante esse assunto e um conhecimento a mais que vai ser tornar diferencial na construção de meus sites.
Paranbéns pela matéria!
Oi pessoal, sou iniciante nessa area, e estou cheia de dúvidas!! Como faço p saber se o css q estou usando é strict ou quirk? no doctype estou declarando html4.. mas em alguns browsers meu site esta td desregulado.
no IE6 ta blz! outra coisa, o q sao hacks? Onde posso achar exmplo de hacks? eles resolvem o problema c os browsers??
Agradeço antecipadamente.
uma diferenca meio punk q eu vejo nos modos eh a hora de colocar height=”100%” em TD’s
isso funciona em modo Quirks, mas em modo Strict nao… tem algum jeito de conseguir isso funcionando de forma igual no modo Strict?
Quando falam no Mozilla, referense-se ao Mozilla Mozilla ou ao Mozilla Firefox? XP
Olá!
Vc disse q no IE coloca um hack e resolve seus problemas. Mas e agora com a chegada do novo IE 7?
Tenho um site que funciona normalmente em todos os browsers… porém no novo IE 7, os hacks são ignorados e distorcem todo o site.
Alguem sabe o que acontece?
Mandem e-mail, por favor!
[…] Tableless - Doctypes e Browsers Modes […]
[…] 5, conhecido pelo sua implementação problemática do CSS Box Model. Isto significa que se usarmos o Doctype Switch para deixar o IE6 em Strict Mode, atenderemos mais de 98% dos visitantes sem nos valermos do famigerado Box Model Hack! Sendo assim, […]