Entenda como os navegadores utilizam o DOCTYPE para aplicar diferentes modos para exibir as páginas
Você provavelmente já deve ter visto de maneira frequente no topo dos documentos HTML atuais, algo como <!DOCTYPE HTML> ou caso esteja visualizando um documento antigo parecerá com <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">.
Mas, você sabe o que é exatamente o DOCTYPE e as consequências do seu não uso? Caso não saiba, fique até o final deste artigo para descobrir.
Boa leitura!
Sumário
- Definição e Sintaxe do DOCTYPE
- Modos de Renderização usados pelos Navegadores
- Quais são os Comportamentos que os Modos tem ao Renderizar a Página?
- Como os Navegadores determinam qual Modo usar?
- Como Saber qual Modo o Navegador está Utilizando?
Definição e Sintaxe do DOCTYPE
Apesar da sintaxe do DOCTYPE (Document type declaration ou Declaração de tipo de documento) ser muito semelhante aos elementos HTML, por conta dos símbolos de colchetes angulares (menor que < e maior que >), ele não é exatamente uma tag, mas sim, uma declaração única por página que precisa vir antes de qualquer elemento subsequente no documento.
O DOCTYPE vai funcionar como uma espécie de instrução, usada como base para informar aos navegadores qual é a versão HTML que está sendo utilizada para a renderização da página.
Antes o HTML nas versões mais antigas era baseado em SGML (Standard generalized markup language ou Linguagem de marcação generalizada padrão) que consistia em uma especificação complexa e alguns casos, era difícil de implementar e compreender.
Além disso, a declaração DOCTYPE precisava de uma associação a um DTD (Document type definition ou Definição de tipo de documento) para definir a estrutura e as regras de marcação que um documento deveria seguir. E o resultado disso, era simplesmente uma extensa declaração contida no documento, confira a lista de DTDs válidos.
Por questões de desenvolvimento da própria linguagem HTML não sendo mais dependente de SGML e também para proporcionar uma melhor compatibilidade, funcionalidade, especificação simples/fácil de implementar e etc, o DOCTYPE na versão HTML5 pode ser escrito de maneira curta (“abreviada”) usando apenas <!DOCTYPE HTML>.
A sintaxe DOCTYPE deve seguir a seguinte ordem enumerada de acordo com a especificação DOCTYPE do WHATWG para ser considerado um DOCTYPE válido:
- Uma string que é uma correspondência ASCII sem distinção entre maiúsculas e minúsculas para a string
<!DOCTYPE. - Um ou mais espaços em branco ASCII.
- Uma string que é uma correspondência ASCII sem distinção entre maiúsculas e minúsculas para a string
html. - Opcionalmente, uma string legada DOCTYPE.
- Zero ou mais espaços em branco ASCII.
- Um caractere de sinal de maior que U+003E (
>).
Ou seja, você pode fazer combinações de caixa alta e baixa ou espaços (com exceções) na sintaxe DOCTYPE como, por exemplo:
- Apenas maiúsculas:
<!DOCTYPE HTML>. - Apenas minúsculas:
<!doctype html>. - Maiúsculas e minúsculas:
<!DOCTYpe HtMl>. - Maiúsculas, minúsculas e mais do que um espaço após a string
"DOCTYPE"e antes do símbolo de maior que (>):<!doctype html >.
Existem desenvolvedores que preferem escrever <!DOCTYPE HTML> ou <!DOCTYPE html> por motivos de legibilidade para destacar a declaração DOCTYPE com letras maiúsculas do restante do código HTML escrito em letras minúsculas, outros preferem escrever tudo em letras minúsculas para manter um único padrão dentro do código e alguns utilizam mais do que um espaço antes do símbolo de maior que (>) em DOCTYPEs antigos, principalmente em documentos XHTML para ressaltar o fechamento dos elementos, porém para por aí e não há motivos de utilizar outra sintaxe além dessas mencionadas para uso.
Caso, o sistema que você esteja utilizando não possa gerar o documento HTML com a versão curta <!DOCTYPE HTML>, você poderá resolver o problema usando a string legada DOCTYPE:
<!DOCTYPE html SYSTEM "about:legacy-compat">
Você pode usar a string legada com aspas simples ou duplas e sem distinções de letras maiúsculas para minúsculas (em exceção para a string dentro das aspas) apenas na hipótese de uso válido para que a página seja renderizada em No quirks mode, evitando o Quirks mode ou Limited quirks mode que são especificados com mais detalhes na próxima seção a seguir.
Modos de Renderização usados pelos Navegadores
Atualmente duas entidades trabalham juntas para regularizar a padronização da linguagem de marcação HTML que são a W3C e WHATWG:
- W3C e WHATWG trabalham juntos em HTML e DOM, nos repositórios WHATWG, para produzir um padrão vivo e rascunhos de recomendação/revisão instantâneos.
- WHATWG mantém os padrões vivos HTML e DOM.
- O W3C facilita o trabalho da comunidade diretamente nos repositórios do WHATWG (ligando comunidades, desenvolvendo casos de uso, arquivando problemas, escrevendo testes, mediando a resolução de problemas).
- O W3C interrompe a publicação independente de uma lista designada de especificações relacionadas a HTML e DOM e, em vez disso, trabalhará para levar os rascunhos de revisão do WHATWG às recomendações do W3C.
Porém, nem sempre foi assim e para você entender as variações de modos de renderização existentes é necessário voltar um pouco no tempo. Antigamente (por volta do final da década de 1990) a maioria das páginas da web eram escritas em duas versões, uma para Netscape navigator e outra para o Microsoft internet explorer, isso fazia com que as páginas fossem construídas se baseando diretamente nas implementações incompletas ou incorretas desses navegadores e renderizadas de acordo com os comportamentos desses navegadores.
Ou seja, nessa época era meio que dificultoso a criação de sites e aplicativos web que funcionassem de maneira igual ou semelhante em todos os navegadores já que cada navegador possuía os seus próprios conjunto de recursos e especificações.
Sendo assim, surgiu a necessidade de criar um padrão que pudesse ser seguido por todos os navegadores e desenvolvedores web para promover o acesso e utilização por qualquer pessoa, independentemente do dispositivo ou software que estejam usando. Este padrão que é conhecido como padrões da web (que são documentos extensos que seguem um processo até virar recomendações, onde detalham exatamente como a tecnologia deve funcionar).
Quando os padrões da web foram criados pelo W3C já existia uma grande quantidade de páginas escritas que não seguiam formalmente os padrões da web, isso fez com que os navegadores não pudessem começar a utilizar de forma imediata os padrões da web já que isso quebraria todos os sites desenvolvidos para as versões dos navegadores Navigator e Internet explorer.
Por conta, dessa adversidade os navegadores precisavam manter a compatibilidade entre sites compatíveis com os padrões da web e sites que não ofereciam compatibilidade com o mesmo, assim diversos modos de renderização foram implementados pelos navegadores para tratar os sites novos de maneira diferente dos sites antigos.
Atualmente existem três modos de renderização adotados pela grande parte dos navegadores para manipular os documentos HTML em determinadas circunstâncias:
Quirks mode
Do português Modo peculiaridades é um modo que emula o comportamento (ou peculiaridades) dos navegadores Navigator 4 e Internet explorer 5 com o intuito de oferecer suporte a versões de sites antigas.
Obs: não utilize este modo (principalmente se o seu site for novo). Quando um navegador entra neste modo, ele geralmente adota comportamentos de layout e renderização mais antigos, o que pode levar a resultados imprevisíveis na exibição do documento.
No quirks mode
Do português Modo sem peculiaridades é um modo com o comportamento que segue os padrões da web, onde possui as especificações mais modernas de HTML e CSS.
Obs: este modo é o que deve ser utilizado atualmente. Antigamente ele era chamado de Full standards mode (do português Modo padrões completos) ou apenas Standards mode (do português Modo padrões).
Limited quirks mode
Do português Modo de peculiaridades limitadas é um modo semelhante ao No quirks mode, porém possui apenas um pequeno número de comportamentos que são implementados pelos navegadores.
Obs: da mesma maneira que o Quirks mode, não o utilize. Por mais que este modo siga grande parte dos padrões da web mais recentes, ele ainda pode levar a comportamentos imprevisíveis na exibição do documento. Antigamente este modo costumava ser chamado de Almost standards mode (do português Modo quase padrão).
Os modos de renderização Quirks, No quirks e Limited quirks são os mais comuns e suportados pela maioria dos navegadores modernos, porém os navegadores podem adotar outros modos personalizados que são projetados para resolver problemas particulares ou seja, exclusivamente de si próprio e não para todos.
Quais são os Comportamentos que os Modos tem ao Renderizar a Página?
Cada modo vai possuir comportamentos específicos que os navegadores utilizam para renderizar a página, porém isso pode depender de vários fatores como, por exemplo, versão do navegador, sistema operacional, dispositivo usado para acessar a página e etc.
No entanto, em geral, os modos de renderização podem afetar a forma como os navegadores interpretam e exibem as páginas da web de várias maneiras, incluindo:
- Box model: os modos podem afetar a forma como os navegadores interpretam o modelo de caixa e como os elementos são exibidos na página.
- CSS: os modos podem incluir propriedades obsoletas ou não padronizadas que são ignoradas ou aplicadas aos elementos.
- HTML: da mesma forma que o CSS, os modos de renderização também podem afetar a forma como os navegadores interpretam as tags HTML, incluindo tags obsoletas ou não padronizadas.
- Suporte: os modos também podem afetar a forma como os navegadores suportam recursos mais modernos da web, como novas APIs do navegador.
É importante notar que alterar o modo de renderização pode ter consequências significativas no layout e no comportamento da página, por isso, é recomendado seguir com prioridade as especificações de padrões da web mais recentes para obter a melhor compatibilidade e resultados esperados na renderização da página.
Como os Navegadores determinam qual Modo usar?
Os navegadores usam a declaração DOCTYPE do topo do documento HTML para determinar qual modo vão renderizar a página (caso haja a falta da mesma ou esteja incorreta).
Se o site for novo deve ser usado a versão curta <!DOCTYPE HTML> que é recomendado para garantir que os navegadores deem prioridade na renderização da página com No quirks mode.
O único propósito da declaração <!DOCTYPE HTML> é ativar o No quirks mode para impedir que o navegador alterne entre os modos de renderização Quirks mode e Limited quirks mode fazendo uma tentativa de seguir os padrões da web.
Em poucas palavras o DOCTYPE deve ser a primeira coisa declarada no início do documento sobretudo se o site for novo, colocar qualquer coisa antes (até mesmo um comentário) poderá resultar no acionamento do Quirks mode ou Limited quirks mode (principalmente em navegadores como o Internet explorer 9 e versões anteriores).
Como Saber qual Modo o Navegador está Utilizando?
Por último, caso queira saber o modo de renderização atual, a propriedade compatMode do objeto document retorna valores que indicam qual modo de renderização da página está sendo usado pelo navegador, os valores são:
-
"BackCompat": o documento está em Quirks mode. -
"CSS1Compat": o documento está em No quirks mode ou Limited quirks mode.
Um exemplo de uso típico com Javascript seria:
if (document.compatMode === "BackCompat") {
// em Quirks Mode
}
Conclusão
Agora você pode dizer que sabe o que é DOCTYPE e a importância dele ao renderizar as páginas. Por mais que os modos não sejam ativados diretamente por você, eles podem ser ativados indiretamente e isso pode trazer diversos comportamentos imprevisíveis para o documento. Por causa disso, na maioria das vezes não haverá motivos para usar outros modos além do No quirks mode que pode ser controlado com a declaração curta de tipo de documento.
Créditos
- Imagem de Isabel Ródenas por Pixabay.
Top comments (0)