No artigo anterior eu expliquei um pouco sobre como funciona o processo de renderização de páginas dos navegadores (browsers).
Dando continuidade à série sobre como a web funciona por debaixo dos panos, neste artigo eu vou explicar como é feita a estilização de páginas.
Basicamente, o processo referente à estilização de páginas é bem semelhante ao de renderização. Ou seja, dados puros em bytes são convertidos para caracteres, são tokenizados, os nodes são criados e, por fim, uma estrutura de árvore é formada.
O que é uma estrutura de árvore?
Bom, no artigo anterior vimos o famoso DOM, responsável por estruturar os elementos HTML em nossa página. Do mesmo jeito, existe uma estrutura de árvore para o CSS. Essa estrutura é chamada de CSSOM (CSS Object Model).
Os navegadores não conseguem lidar com bytes puros de HTML ou CSS – ambos precisam ser convertidos para algo que o mesmo entenda e reconheça. Essa conversão é o que resulta no CSSOM, algo mais ou menos assim:
Cascata
O CSS tem algo chamado Cascata (Cascade). A cascata é como o navegador (browser) determina quais estilos são aplicados para os elementos.
A estrutura de árvore torna-se importante quando precisamos definir como nossos elementos estão sendo estilizados. Ou seja, os estilos que afetam nossos elementos podem vir através da herança de elementos pais ou foram definidos no próprio elemento.
Conclusão
Neste artigo expliquei um pouco sobre como funciona o processo de estilização das páginas nos navegadores (browsers). Vimos que é algo bem parecido com o processo de renderização:
E aí, você já conhecia o processo de estilização das páginas pelos navegadores? Não deixe de comentar!
Caso tenha gostado deste artigo e tem interesse em receber novidades por e-mail, fique à vontade para assinar nossa newsletter no final da página.
Abraços e até a próxima!
Referência
De 0 a 10, o quanto você recomendaria este artigo para um amigo?