DEV Community

Discussion on: How does a Browser render a Webpage?

Collapse
srikanth597 profile image
srikanth597

Good one, seems like I'm seeing ur posts after longtime.
Question on CSSOM , where u mentioned it will copy the css to html element, but again if I understand ur statements correctly Render tree is also doing same job as CSSOM stage, couldn't spot the exact bit which differs , to me both stages looks to club css to html element?

What does it mean by user agent style sheets? Does it mean default browser style that comes i.e the bare html without connecting written css code?

Collapse
anuradha9712 profile image
Anuradha Aggarwal Author • Edited on

CSSOM contains the nodes on which css rules are applied whereas render tree only contains the visible nodes to be displayed on the screen.

And yes, user-agent stylesheet means default styles applied by web browsers in absence of any css rules specify by user.

Collapse
alohci profile image
Nicholas Stimpson

@srikanth597 You are correct. The CSSOM diagram, widely reproduced from a Google source, misrepresents what the CSSOM is. There is no body-to-div-to-img tree structure in the CSSOM. The CSSOM is a like a database of the accumulated stylesheets loaded for the document. All the rules, media queries etc declared, but not yet applied via the cascade to the DOM elements. The CSSOM provides the means for this database of rules to be manipulated by JavaScript.

Only when the CSSOM is applied to the DOM can the cascade be resolved for each element and the render tree (a.k.a box tree) constructed.