Usando o elemento DOCTYPE no modo Quirks

Neste artigo

Se você cria páginas da web há mais de alguns meses, provavelmente está ciente da dificuldade em escrever uma página que tenha a mesma aparência em todos os navegadores. Na verdade, isso é impossível. Muitos navegadores foram escritos com recursos especiais que só eles podiam controlar. Ou eles têm maneiras especiais de lidar com as coisas que são diferentes de como outros navegadores lidam com elas. Por exemplo: DOCTYPE

type = “code”> chamadas.

• As camadas foram criadas para uso em navegadores Netscape. Eles não funcionam em nenhum outro navegador e, na verdade, estão obsoletos no Netscape 6.x +.
• Os quadros embutidos foram originalmente criados apenas para o Internet Explorer e, desde então, tornaram-se parte da especificação HTML.
• O Internet Explorer 6.0 adiciona um espaço adicional (como um
  ) ao redor das tags, a menos que você escreva o conteúdo do div em uma linha (longa). (O IE 6 tem muito mais peculiaridades além desta.)
• O Netscape 4.7 não exibirá tabelas que não foram escritas no HTML correto – ele mostra uma página em branco. Isso foi corrigido no Netscape 6.

O problema para os desenvolvedores de navegador é que eles precisam criar navegadores da web que sejam compatíveis com versões anteriores de páginas da web construídas para navegadores mais antigos. Para lidar com esse problema, os fabricantes de navegadores criaram modos para os navegadores operarem. Esses modos são definidos pela presença ou ausência de um elemento DOCTYPE e o que esse DOCTYPE

type = “code”> chamadas.

Troca de DOCTYPE e “Modo peculiares”

Se você colocar os seguintes navegadores DOCTYPE Modern (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+), isso interpretará da seguinte maneira:

1. Porque há um DOCTYPE escrito corretamente

   , isso aciona o modo de padrões.

2. É um documento de transição HTML 4.01
3. Por estar no modo padrão, a maioria dos navegadores irá tornar o conteúdo compatível (ou em grande parte compatível) com HTML 4.01 Transitional

E se você colocar este DOCTYPE Isso informa aos navegadores modernos que você deseja exibir sua página HTML 4.01 em estrita conformidade com o DTD. Esses navegadores entrarão no modo “estrito” ou “padrões” e renderizarão a página de acordo com os padrões. (Portanto, para este documento, tags como podem ser completamente ignoradas pelo navegador, já que o elemento FONT foi descontinuado no HTML 4.01 Strict.) Se você deixar o DOCTYPE A tabela abaixo mostra o que os navegadores comuns fazem quando apresentados a diferentes comuns DOCTYPE

Microsoft torna tudo mais difícil

O Internet Explorer 6 também tem o recurso de colocar qualquer coisa acima de DOCTYPE

declaração, eles entrarão no modo quirks. Portanto, ambos os exemplos colocarão o IE 6 em modo peculiar, embora o DOCTYPE e o XHTML 1.1 DOCTYPE Plus, se você passar do IE6, terá o “recurso” que a Microsoft adicionou no IE8 e no IE9: META

troca de elemento

• Modo quirks do IE 5.5 (IE 8 e 9)
• Modo de padrões do IE 7 (IE 8 e 9)
• IE 8 quase modo padrão (IE 8 e 9)
• Modo de padrões do IE 8 (IE 8 e 9)
• IE 9 quase modo padrão (IE 9)
• Modo de padrões do IE 9 (IE 9)
• Modo XML (IE 9)

O IE 8 também introduziu o “Modo de Compatibilidade”, em que o usuário pode escolher alterar o modelo de renderização de volta para o modo IE 7. Assim, mesmo se você definir o modo que deseja definir usando o DOCTYPE

e META

elementos, sua página poderia
ainda

O que é o modo Quirks?

O modo Quirks foi criado para ajudar a lidar com toda a renderização estranha e suporte de navegador incompatível e hacks que os web designers estavam usando para lidar com essas coisas. A preocupação dos fabricantes de navegadores era que, se mudassem seus navegadores para conformidade total com as especificações, os web designers seriam deixados para trás. Configurando DOCTYPE

Efeitos do modo peculiares

Existem vários efeitos que a maioria dos navegadores usa no modo Quirks:

• Em alguns navegadores, o modelo de caixa muda para a versão IE 5.5 do modelo de caixa no modo quirks.
• Alguns navegadores não herdam estilos em tabelas
• O modo Quirks afeta drasticamente a análise do CSS e do layout CSS, se você estiver convertendo páginas do modo quirks para o modo padrão, certifique-se de testar o layout CSS e analisar extensivamente.
• Observe as mudanças no script quando estiver no modo quirks. O Firefox muda a forma como o id

  atributo funciona, por exemplo. O IE8 e o IE9 apresentam mudanças drásticas nos scripts do modo quirks.

Também há uma diferença no “Modo quase padrão:”

• A altura das células da tabela com apenas imagens dentro é calculada de maneira diferente do modo padrão.

Como escolher um DOCTYPE

Eu entro em mais detalhes no meu artigo DOCTYPE

1. Sempre escolha o modo padrão primeiro. E o padrão atual que você deve usar é HTML5: a menos que você tenha um motivo específico para evitar o uso do DOCTYPE HTML5

   , é isso que você deve usar.

2. Vá para HTML 4.01 estrito se precisar validar elementos legados ou quiser evitar novos recursos por algum motivo:
3. Se você fatiou imagens em uma tabela e não deseja corrigi-las, vá para o HTML de transição 4.01:
4. Não escreva páginas deliberadamente no modo peculiar. Sempre use um DOCTYPE

   . Isso economizará tempo de desenvolvimento no futuro e realmente não traz nenhum benefício. O IE6 está perdendo popularidade rapidamente e, ao projetar para este navegador (que é essencialmente o que é projetar no modo quirks), você está limitando a si mesmo, seus leitores e suas páginas. Se você precisar escrever para o IE 6 ou 7, use comentários condicionais para apoiá-los, em vez de forçar os navegadores modernos a entrar no modo quirks.

Por que usar DOCTYPE

Assim que você estiver ciente desse tipo de DOCTYPE

alternando, você pode afetar suas páginas da web mais diretamente usando um DOCTYPE

que indica o que o navegador pode esperar de sua página. Além disso, assim que você começar a usar DOCTYPE

Versões do navegador e modo peculiares

DOCTYPE	Android cromada Raposa de fogo IE 8+ iOS Opera 7.5+ Safári	IE 6 IE 7 Opera 7	Netscape 6
Nenhum	Modo peculiares	Modo peculiares	Modo peculiares
HTML 3.2
	Modo peculiares	Modo peculiares	Modo peculiares
HTML 4.01
Transitório	Modo padrão *	Modo padrão *	Modo de Padrões
Transitório	Modo peculiares	Modo peculiares	Modo peculiares
Rigoroso	Modo de Padrões	Modo padrão *	Modo de Padrões
Rigoroso	Modo de Padrões	Modo padrão *	Modo de Padrões
HTML5
	Modo de Padrões	Modo padrão *	Modo peculiares

Mais da Lifewire

• 

  Descrição e usos da metatag compatível com X-UA

• 

  Usando HTML5 para exibir vídeo nos navegadores atuais

• 

  Por que existem diferentes versões de HTML

• 

  Como usar CSS para centralizar imagens e outros objetos HTML

• 

  Como esticar uma imagem de fundo para caber em uma página da web

• 

  Usando atributos do elemento HTML TABLE

• 

  Como atualizar o Internet Explorer

• 

  9 melhores editores de HTML gratuitos para Windows para 2021

• 

  Como criar espaços em branco com as tags ‘p’ e ‘br’

• 

  O que são linguagens de marcação?

• 

  Prefixos de fornecedores CSS

• 

  Como inspecionar os elementos da página da web

• 

  Adicionar imagens a páginas da web usando HTML

• 

  O que é uma tag HTML versus um elemento HTML?

• 

  Os 7 melhores editores de HTML WYSIWYG do Windows de 2021

Seus direitos de privacidade

A Lifewire e nossos parceiros terceirizados usam cookies e processam dados pessoais como identificadores exclusivos com base em seu consentimento para armazenar e / ou acessar informações em um dispositivo, exibir anúncios personalizados e para medição de conteúdo, percepção do público e desenvolvimento de produtos. Para alterar ou retirar suas opções de consentimento para Lifewire.com, incluindo seu direito de contestar quando um interesse legítimo é usado, clique abaixo. A qualquer momento, você pode atualizar suas configurações por meio do link “Privacidade da UE” na parte inferior de qualquer página. Essas escolhas serão sinalizadas globalmente para nossos parceiros e não afetarão os dados de navegação. Lista de parceiros (fornecedores)

Nós e nossos parceiros processamos dados para:

Digitalize ativamente as características do dispositivo para identificação. Use dados precisos de geolocalização. Armazene e / ou acesse informações em um dispositivo. Selecione o conteúdo personalizado. Crie um perfil de conteúdo personalizado. Avalie o desempenho do anúncio. Selecione anúncios básicos. Crie um perfil de anúncios personalizados. Selecione anúncios personalizados. Aplique pesquisas de mercado para gerar insights do público. Avalie o desempenho do conteúdo. Desenvolva e aprimore produtos. Lista de parceiros (fornecedores)

Eu aceito
Mostrar objetivos