Swastik Yadav

S Y

Navigate back to the homepage
Subscribe

How CSS is parsed on the browser

Swastik Yadav
May 28th, 2021 · 1 min read

We all have used CSS to build beautiful and responsive webpages. But do you know:

  • How browser parses the CSS?
  • How CSS renders the style?
  • How layout of the page is decided?

In this post I will try to answer the above questions in a simple manner.

CSS is parsed on the browser in 3 steps.

  1. Resolve conflicting CSS declarations.
  2. Process final computed CSS values.
  3. Visual Formatting Model.

Here is a complete flow of these 3 steps.

how css is parsed on the v=browser

Let’s understand each step.

1 Resolve Conflicting CSS declarations.

  • Different stylesheets are combined together.
  • Resolving conflicts when more than one rule is applied to a certain element.

For ex: Which color to apply when defined twice for the same element.

Here Cascade & Specificity is at play.

css-specificity

2 Processing Values

All relative units (%, em, rem, vh, vw) are finally converted to absolute unit, pixels (px).

At this phase, all CSS values become computed values not the specified values.

CSS relative value conversion to px

3 The visual formatting model.

This is the algorithm that calculates boxes & determines the layout of these boxes, for each element in the render tree, to determine the page’s final layout.

visual-formatting-model-css


So, that’s how CSS is parsed on the browser. If you enjoyed this post then consider engaging with the original post on Twitter..

Also, follow me there, I keep sharing stuff on full-stack web development and design.

Thank You!

More articles from Swastik Yadav

DataStructure and Algorithm Series in JavaScript

The complete guide to DataStructure and Algorithm in JavaScript for beginners. All major DS and Algos.

May 11th, 2021 · 8 min read

My first developer job and why I left it

How I got my first dev job as a college drop out without a CS degree and why I left it.

April 27th, 2021 · 3 min read

Become a better full-stack developer in 10 minutes a week.

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.



By subscribing, you agree with Revue’s Terms and Privacy Policy.
© 2021 Swastik Yadav
Link to $https://twitter.com/swastikJsDevLink to $https://github.com/SwastikyadavLink to $https://www.linkedin.com/in/swastik-yadav-6386b71b5/Link to $https://www.youtube.com/channel/UCHs73qDeimVFGTa-MzjtnLA