Busca

Boas práticas de Desenvolvimento com Padrões Web

Doctype e Browsers Modes

Um assunto meio complexo e interessante que muita gente se confundi na hora de entender. Doctypes e os modes dos browsers. Acho que todos [...]

07/03/2005 por Diego Eis
28 Comentários

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:

28 Comentários
Leia também:

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

28 Comentários

Assunção Jr. 07/03/2005 às 00:00

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…

David Tobias 07/03/2005 às 00:00

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 ?

Fellipe Cicconi 07/03/2005 às 00:00

AH! Então era pra isso!!!

henriquepaiva 07/03/2005 às 00:00

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.

Newton Wagner 07/03/2005 às 00:00

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.

Caio Mancini 07/03/2005 às 00:00

Ainda não entendi como na prática funciona isto!

Fabiano 07/03/2005 às 00:00

idem

Newton Wagner 07/03/2005 às 00:00

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).

Renato 07/03/2005 às 00:00

Não é bem assim Newton, o IE 6 (e o IE 5 Mac também) possui duas formas de renderizar: quirks e standards.

Já o Mozilla possui, na verdade, três modos de renderização:
- quirks
- "quase" standards;
- standards.

Um bom artigo sobre o assunto:
http://www.communitymx.com/content/article.cfm?cid=85FEE

Explicação oficial sobre os doctypes de Mozilla:
http://www.mozilla.org/docs/web-developer/quirks/doctypes.html

Explicação oficial do que o Mozilla faz de diferente quando está em quirks mode:
http://www.mozilla.org/docs/web-developer/quirks/quirklist.html

celo 07/03/2005 às 00:00

se vc naum estah confuso eh pq naum estah prestando atençao

caio 07/03/2005 às 00:00

gostaria de ver os códigos para fazer isto.

Newton Wagner 07/03/2005 às 00:00

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.

Leandro Vieira Pinho 07/03/2005 às 00:00

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?

Caio Mancini 07/03/2005 às 00:00

eu tenho o msm problema que o Leandro. Se uso o prolog <?xml … dá pau com PHP… e ae como fica?

Elcio 07/03/2005 às 00:00

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"?’ .’>’ ?>

Fabr&#237;cio Marchezini 07/03/2005 às 00:00

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.

Tatiana Brisola 07/03/2005 às 00:00

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….

William 07/03/2005 às 00:00

Não sabia disso..

Jo&#227;o David 07/03/2005 às 00:00

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 ?

Rafael Bandeira da Silva 23/01/2006 às 12:54

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!

Ingrid Castro 24/01/2006 às 15:32

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.

Wilker 29/01/2006 às 06:58

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?

Antonio Augusto 01/02/2006 às 00:30

Quando falam no Mozilla, referense-se ao Mozilla Mozilla ou ao Mozilla Firefox? XP

Daniel 03/03/2006 às 17:41

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!

CSS Hacks ou comentários condicionais? « O Webmaster 29/06/2008 às 09:55

[...] 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, [...]