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:
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.
