Overview of how does CSS works behind the scenes? by@jscodelover

Overview of how does CSS works behind the scenes?

April 8th 2019 4,363 reads
Read on Terminal Reader
react to story with heart
react to story with light
react to story with boat
react to story with money
image

Let’s start by understanding what actually happens to our CSS code when we load up a web page in a browser.


When a browser starts to load the initial HTML file, it takes the loaded HTML code and parses it, which means that it will decode the code line by line.By this process, the browser builds the so-called DOM (Document Object Modal) which describes the entire web document in a tree with parent, children and sibling elements.

image

HTML Parsing


As the browser parses the HTML, it also finds the stylesheets included in the HTML head and just like HTML, CSS is also parsed.But the parsing of CSS bit more complex.

image

There are two main steps that are performed during the CSS parsing phase :

1. Conflicting CSS declarations are resolved (also known a cascading)

2. Process final CSS values (for eg- converting a margin defined in percentage units to pixels)

Parsed CSS is also stored in a tree-like structure called CSS Object Modal, similar to DOM.

image

CSS Parsing


Both parsed HTML and CSS together form the so-called Render Tree.With this, we finally have everything we need to render the page.

Visual Formatting Model is something that is used by the browser to actually render the page. It is the algorithm that calculates the boxes(box-model) and determines the layout of these boxes, for each element in the render tree, in order to determine the final layout of the page.

So finally, after the visual formatting model, the website is finally rendered or painted, to the screen.

image


This is the brief picture of the process that happens behind the scene.In the next article, we will dive deep into the topic(CSS parsing, visual formatting modal) to know what exactly happens behind the scene.

Follow me on Twitter, LinkedIn or GitHub.

I hope this article is useful to you. Thanks for reading & Keep Learning !!

react to story with heart
react to story with light
react to story with boat
react to story with money

Related Stories

L O A D I N G
. . . comments & more!