O QUE ACONTECE EM SEU SITE NO MODO QUIRKS MODE?
blog reactions Postado em: 8 de novembro de 2007 por Pedro RogérioQuirks mode é o modo em que os browsers entram quando não há nenhum doctype definido em sua página, com isso, eles não cumprem as regras básicas de padrões de desnvolvimento. No artigo escrito por Jukka K. Korpela - “What happens in Quirks Mode?”, ele explica os comportamentos mais comuns que os browsers tem ao entrar em modo QuirksMode:
No modo QuirksMode, é observado que os browsers funcionam em distintas formas, mas nem todos os browsers mostram esse comportamento.
- O Box Model é incorreto (diferente das especificações do W3C, intuitivamente mais natural). Isso significa que as propriedades width e height especificam todas as dimensões dos elementos do box, incluindo as bordas e o padding e não só o conteúdo dos elementos.
- As dimensões dos elementos inline não definidos (por padrão span) são afetadas pelas propriedades width e height (mas as especificações CSS são ignoradas.).
- A altura (height) das tabelas são afetadas por um atributo height que não segue os padrões no elemento table.
- O Overflow é tratado para expandir um box. Quando o conteúdo de um elemento não cabe dentro das dimensões especificadas para ele (explicitamente ou não), então overflow:visible (por padrão), deveria fazer com que o conteúdo aparecesse dentro do box com as dimensões especificadas. Em QuirksMode as dimensões mudam, isso pode ser comprovado facilmente definindo uma cor de fundo ou uma borda para o box.
- O Padding para uma imagem é ignorado quando especificado no CSS para o elemento img ou o elemento input type=”image”.
- A margem horizontal para uma imagem com float é de 3 pixels (no lugar de zero). Isto é, um elemento img com o atributo align=”left” ou align=”right” ou com as regras equivalentes em CSS (float:left ou float:right) aplicados, o browser se comporta como se o elemento img tivesse o atributo hspace=”3″ (ou seu equivalente margin-left:3px ou margin-right:3px). Isso se aplica ao Internet Explorer, em outros navegadores o modo Quirks pode provocar uma margem extra somente para um dos lados da imagem e seu valor pode ser de 2 pixels, ao invés de 3px.
- O alinhamento vertical de uma imagem é, sob certas condições, a parte inferior, e não a base do texto. Isso acontece quando uma imagem é o único conteúdo de um elemento, tipicamente uma célula de uma tabela. Isso significa que uma imagem em uma célula de tabela está abaixo de tudo, mas no modo “standard” pode-se reparar que existe um pouco de espaço abaixo da imagem, ao menos que, o usuário defina um vertical-align:bottom para o elemento img.
- Centralizar elementos de bloco utilizando margin:0 auto não funciona.
- As propriedades das fontes não são herdadas do body ou outros elementos como as tabelas. Isso acontece especialmente com font-size, mas pode acontecer com font face, color e line-height. Por exemplo, se especificar-mos: body { font-family: Arial; } é possível que seja usada em uma tabela a fonte especificada por padrão no browser.
- No tamanho da fonte para uma célula de tabela, com uma valor especificado em porcentagem (ex: 80%), é interpretado como relativo ao tamanho básico da fonte do navegador e não o valor especificado em seu elemento pai (tabe row), como dizem as especificações CSS.
- As palavras chave para o tamanho das fontes são interpretadas incorretamente, assim medium é maior que o tamanho padrão do navegador e small equivale ao tamanho base. Ocorre de forma similar com toda a escala: xx-small, x-small, small, large, x-large, xx-large, onde cada valor é interpretado com um valor maior ao que deveria.
- Os valores das propriedades mal formadas são interpretados baseando-se em conjeturas, por exemplo: margin: 10 é interpretado como margin:10px e color: ffffff é interpretado como color: #ffffff. Isso transgrede as regras na hora de processar valores incorretos, pois, se a sintaxe de um valor é incorreta, ela deve ser ignorada.
- Erros com declarações Case Sensitive, por exemplo: .foo concorda com o elemento class=”Foo” ou class=”FOO”. Segundo as especificações CSS, o uso de maiúsculas e minúsculas é significativo.
- Os nomes mal formados são aceitos para classes e identificadores/seletores. Especialmente os que são formados por um intervalo de números, ex: .123a ou #42 são aceitos.
- A declaração white-space: pre é ignorada.
- A declaração position:fixed é tratada como position:static no IE7.
- Muitas propriedades do CSS (como a propriedade max-width) no Internet Explorer 7 não são utilizadas, Isto é, existem várias propriedades do CSS que não funcionavam no IE6 e passaram a funcionar no IE7 em modo “standard”, que não funcionam em QuirksMode. Para maiores informações sobre suporte a CSS no IE7 basta visitar o blog da microsoft que trata sobre o assunto.
- Tag soup. Por exemplo: Se você tem a seguinte marcação: <p>texto<table>…</table>, o Firefox trata, em QuirksMode, que o elemento p contém a tabela. Em modo “standard”, marcaria o início da tabela e implicitamente o fechamento da tag p.
- Espaços em branco entre elementos pode ser significativo, por exemplo, se você tem uma lista de links, utilizaria listas para mostrar os mesmos, consequentemente utilizaria quebras de linha para escrever a marcação entre os itens da lista. No entanto se você definir um display:block e uma borda para os links, poderá ocorrer de aparecer linhas vazias entre os boxes. Isto acontece no IE 7 em QuirksMode, e sempre em versões anteriores do IE.
- Formulários tem por padrão um margem inferior de 1em em browsers Mozilla (No IE existe uma margem em ambos os modos).
- Navegadores Mozilla (como o Firefox e o Seamonkey) têm algumas características adicionais, documentadas no arquivo quirk.css. Por exemplo, a cor padrão para as bordas é cinza (como na maioria dos outros browsers), como oposto ao uso da cor da tabela em Standards Mode. Em tais questões, Quirks Mode é realmente apenas um modo diferente de compatibilidade. Nota: Nem todas as configurações no arquivo se aplicam a todas as versões do Mozilla.
Para obter mais informações e exemplos, é só visitar o artigo de Jukka K. Korpela.
