2

enter image description here

In a stackoverflow question said cssom and dom are generated synchronous.If cssom generates firstly, how does it know how the dom look like and generate a cssom tree look like a dom tree plus css properties as pic shown above.why not look like this according to the css.

enter image description here

when my html is like this as below.I can also use the style as above; enter image description here

Even when my html look like this.

enter image description here

JackieWillen
  • 673
  • 1
  • 12
  • 23

2 Answers2

2

CSSOM doesn't need to know anything about the dom, because CSSOM is a tree of styling rules only.

You are referring to Render Tree, which is created after DOM and CSSOM are ready.

To make it more clear:

  1. HTML starts being parsed
  2. Style tag appears
  3. Parser not pause DOM tree building and starts process of building CSSOM
  4. DOM tree is built + CSSOM is built = browser starts building Render Tree
  5. Based on Render Tree browser starts calculating layout.
  6. After that painting starts.
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Kasia
  • 1,665
  • 1
  • 10
  • 16
  • it's more complicated if Javascript is attached to the HTML - as JS has impact on both (just for different reasons) – Kasia Sep 19 '19 at 13:15
  • I just want to understand a simple example as my question.No javascript to append html dynamically。I want to know how the browser parse css line by line then generate cssom.Why the tree node sort like this no like that. – JackieWillen Sep 19 '19 at 13:30
  • because this tree (CSSOM) is built only based on css selectors - there is `body` selector - `body` node, `p` selector (p can only appear in body) so `body->p` node and so on – Kasia Sep 19 '19 at 13:32
  • we have `span` selector and this is another node in the CSSOM `body->span`, we have also more complicated selector `p span`, and it creates another node in CSSOM `body->p->span` – Kasia Sep 19 '19 at 13:33
  • I find a github project try to do this.I tried the css above here:https://nv.github.io/CSSOM/docs/parse.html#css=body%20%7Bfont-size%3A%2016px%3B%7D%0Ap%20%7Bfont-weight%3A%20bold%7D%0Aspan%20%7Bcolor%3A%20red%7D%0Ap%20span%20%7B%0Adisplay%3A%20none%3B%0A%7D%0Aimg%20%7Bfloat%3A%20right%7D – JackieWillen Sep 19 '19 at 13:36
  • But, the github project did not generate a cssom like the pic which i show on my question above. – JackieWillen Sep 19 '19 at 13:37
  • of course, becuase this is only visualization. CSSOM is a huge data model which contains more details than this picture. (browser default styles, inline styles interfaces, API) - it's more complicated structure, but the picture is the essense of what CSSOM contains - information about what styling rules in the end will be applied to given html element. – Kasia Sep 19 '19 at 13:40
  • As you said above. when i have selector img {font-size: },how do you know the node is in body->img not in body->span->img or in body->div->img.The img {font-size: ***} can be used in this three conditions. – JackieWillen Sep 19 '19 at 13:45
  • 1
    nice question! it's based on CSS selector only - we have `img` selector which is `body img` by default but applies to all img in the body (no matter if it will be in div, p, section or in the body directly) only if there would be added css selector `div img` new node would be created in CSSOM `div->img` and would contain rules only for images inside `div` - this rules would by cascade get rules from `body img` and add it's own rules on top of that – Kasia Sep 19 '19 at 13:53
  • I got it.Thank you very much. – JackieWillen Sep 20 '19 at 02:51
  • you are welcome, also write to me directly if you have any more concerns :) – Kasia Sep 20 '19 at 12:11
1

You can find the detailed explanation in the below link Render Tree

  • I have read this article but still don't know the details about how the cssom generated。Why it generates cssom look like pic above not like other tree.What is the rule to generate cssom according to css style line-by-line? – JackieWillen Sep 19 '19 at 13:18
  • it's based on your css selectors - CSSOM has no connection with your HTML just yet. As you can see CSSOM contains nodes related to css rules only - even if your HTML contains more different HTML tags – Kasia Sep 19 '19 at 13:20