3

Estou começando nesse mundo do Front e li que o browser lê e interpreta o css da direita pra esquerda.

Mas como ele lê e interpreta quando existe a cascata de classes, assim como nesse exemplo:

.classe-A .class-B #id-A span p { 
 color: red;
}

Pelo que entendi, ele vai ler o P que esta no SPAN que está no #id-a que está na classe-A e só então quando chegar no fim na classe-B ele aplica o css.

Está certo ?

Como isso é lido, interpretado pelo browser e aplicado ao html? Minha dúvida seria sobre o que acontece por trás dos panos do browser, pois eu li em algum lugar que ele vai ler todos os P e montar um array-like com isso, e só então ele vai estilizar.

9
  • Não entendi bem a dúvida... A regra que você deu de exemplo só se aplica sim aos p que estiverem dentro de tudo aquilo, naquela ordem. É isso a dúvida??
    – bfavaretto
    Commented 7/02/2018 às 19:02
  • 2
    Recomendo a leitura do artigo Como os navegadores funcionam. Lá explica como os navegadores interpretam o Html, Css e JS. Caso alguém queira ler e pegar como base... Commented 7/02/2018 às 19:03
  • @bfavaretto minha duvida seria um pouco mais por trás dos panos do browser, pois eu li em algum lugar que ele vai ler todos os P e montar um array-like com isso e só entao ele vai estilizar, mas como n encontro mais isso, n sei se posso confiar na minha memoria rsrsrs Commented 7/02/2018 às 19:05
  • 1
    Então leia o artigo que o @ValdeirPsr indicou. Só nunca se esqueça que pode haver variação entre os browsers em relação aos detalhes de implementação. O CSS é uma especificação, se o browser conseguir gerar o resultado esperado para o que a linguagem determina, tá tudo certo. Não existe imposição quanto a detalhes de implementação.
    – bfavaretto
    Commented 7/02/2018 às 19:07
  • 1
    Cada browser implementa do seu próprio jeito, a única coisa que importa é obedecer àa especificações de forma ao resultado ser previsível. O essencial já foi respondido aqui no SOpt mesmo. Ex: Qual a diferença entre os seletores “element element” e “element>element”?; Qual seletor CSS tem prioridade; Quando utilizar div+seletor no CSS; Qual a definição de cada combinação nos seletores CSS
    – Largato
    Commented 7/02/2018 às 21:05

1 Resposta 1

4

Cada navegador possui um motor de análise e renderização de HTML/CSS. Todos eles se esforçam em fazer com que a página seja mais rapidamente carregada e renderizada. Geralmente o processo é tão rápido que não se pode notar as fases em que isso ocorre (veja mais abaixo).

Por exemplo, o Chrome e o Opera aproveitaram o Webkit e usam o motor chamado Blink. O Safari usa o Webkit, o Internet Explorer usa o Trident, o Firefox usa o Gecko.

Esses motores de renderização possuem interpretadores CSS e analisadores de DOM e seguem os modelos do padrão W3C:

Esses modelos são interligados e independentes, mas separadamente não são padrões de renderização de CSS.

Os navegadores baixam o HTML e o CSS do servidor e primeiro analisam e adicionam as tags HTML aos nós do DOM, criando uma árvore chamada árvore de conteúdo.

Fase 1:

Enquanto o HTML é analisado, o motor de renderização cria uma nova árvore chamada de árvore de renderização. Esta árvore representa os efeitos visuais com os quais os elementos serão exibidos.

Fase 2:

Após os processos acima, ambas as árvores passam pelo processo de layout, onde o navegador posiciona na área do documento cada nó (elemento). Isto é chamado pelo W3C de esquema de posicionamento, que instrui o navegador onde e como cada elemento deverá ser inserido, conforme 3 tipos: fluxo normal, floaters e posição absoluta.

Fase 3:

A fase final chamada painting (tradução livre, pintura). É o processo gradual onde o motor de renderização percorre a árvore de renderização aplicando todos os efeitos visuais, como tamanhos, cores etc.

Esta fase pode ser observada quando se abre uma página em uma conexão mais lenta, podendo ver os estilos visuais sendo aplicados conforme a página é renderizada.

Em relação à analise do exemplo:

.classe-A .class-B #id-A span p { 
 color: red;
}

A ordem de leitura, da direita pra esquerda (do filho ao pai) ou da esquerda pra direita (do pai ao filho) ao meu ver não faz muita diferença, já que se chega ao mesmo resultado, porém acho mais razoável e, na minha opinião, mais fácil, a leitura da esquerda para a direita, uma vez que o CSS é interpretado de cima pra baixo, de pai pra filho.

Fonte de pesquisa e interpretação.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .