Tableless - Desenvolvimento inteligente com Padrões Web

07/03/2005
Browsers

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 já ouviram falar em Box Model, não é? Pois então… Alguns browsers calculam as medidas no …

Por

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:

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • Assunção Jr.

    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

    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 ?

  • http://leandro.plugsites.net Leandro Vieira Pinho

    O que é um prolog?

  • http://ruf.rockgrafia.com Fellipe Cicconi

    AH! Então era pra isso!!!

  • http://gritos.no-ip.com henriquepaiva

    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.

  • http://newton.chemicalhost.net;/ Newton Wagner

    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

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

  • Fabiano

    idem

  • http://newton.chemicalhost.net/ Newton Wagner

    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

    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

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

  • caio

    gostaria de ver os códigos para fazer isto.

  • a

    a

  • Newton Wagner

    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.

  • http://leandro.plugsites.net Leandro Vieira Pinho

    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

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

  • http://elcio.locaweb.com.br/ Elcio

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

  • http://zeroseis.blogspot.com Fabrício Marchezini

    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

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

  • http://www.wwwconvex.com.br/ William

    Não sabia disso..

  • João David

    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 ?

  • http://www.ponto7.com.br Rafael Bandeira da Silva

    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!

  • http://www.biritaeforro.com.br Ingrid Castro

    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

    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

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

  • http://www.formulaweb.com.br Daniel

    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!

  • Pingback: Boas praticas para Desenvolvimento Web #1 » Clauber Stipkovic Halic - CSH

  • Pingback: CSS Hacks ou comentários condicionais? « O Webmaster

  • Pingback: Doctypes (o que, como, porque e quando?)… « Marcos Paiva