Matheus Castiglioni

Desconstruindo a Web: Estilização De Páginas

No post anterior eu expliquei um pouco sobre como é o processo de renderização de páginas dos navegadores (browsers).

Dando continuidade na série sobre como a web funciona por debaixo dos panos, nesse post vou explicar como é feito a estilização de páginas.

Basicamente o processo referente a estilização de páginas é bem semelhante ao de renderização, ou seja, dados puros em bytes são convertidos para caracteres, então são tokenizados, os nodes são criados e por fim uma estrutura de árvore é formada.

O que é uma estrutura de árvore?

Bom, no post anterior vimos o famoso DOM, responsável por estrutura 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:

Estilização de páginas

Cascata

O CSS tem algo chamado de 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 vim via herança de elementos pais ou foram definidos no próprio elemento.

Conclusão

Nesse post 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 desse post e quer receber novidades por email, fique á vontade para assinar se inscrever na newsletter.

Abraços, até a próxima.

Referência

Matheus Castiglioni

Matheus Castiglioni

Apaixonado pelo mundo dos códigos e um eterno estudante, gosto de aprender e saber um pouco de tudo, aquela curiosidade de saber como tudo funciona, tento compartilhar o máximo de conhecimentos adquiridos e ajudar todos aqueles que sou capaz.

comments powered by Disqus