How do browsers read and interpret CSS?

by

CSS rendering is an interesting topic and all the competitors are thriving hard to speed up the view layer (HTML and CSS) rendering to deliver the best results to the end users at a blink of an eye.

Firstly, yes different browsers have their own CSS parser/Rendering engines

  • Google Chrome, Opera (from version 15) – Uses Webkit fork called Blink
    Rendering engine
  • Safari – uses Webkit (Now forked to Webkit2)
  • Internet Explorer – uses Trident Rendering engine. (+ Update: Edge on Windows 10 uses Chromium fork for its future versions)
  • Mozilla firefox – Uses Gecko

All these rendering engine contain both CSS interpreter and HTML DOM parser.

All these engines follow below listed models , these are the set of W3C standard

Note: All these models are interlinked and interdependent. They are
not separate models defining standards to render the CSS. These models
shed light on how CSS is processed based on precedence like inline styling,
Specificity etc.

Explanation:

Stage 1:

All the browsers download the HTML and CSS script from the server and start off by parsing HTML tags to DOM nodes in a tree called content tree.

While the HTML doc being parsed browser rendering engines construct another tree called the Render tree. This tree is of visual elements in the order in which they will be displayed.

Firefox call it as frames where as Webkit guys call them as Renderer or Renderer object.

See the below image: (Source: HTML5 Rocks)

enter image description here

Stage 2:

After the above process both these tree goes through Layout process meaning the browser tells the viewport where each node has to be placed on the screen.

This is defined as positioning scheme by W3C(Follow this link for detailed info) which instructs the browser on how and where elements are to be placed. Below are the 3 types.

  • Normal Flow
  • Floats
  • Absolute position

Stage 3:

Now the final stage called Painting. This is a gradual process where the rendering engine traverse through each render tree nodes and paint them visually using UI backend layer. At this point all the visual Fx are applied like Font size, Background color, Table painting etc.

Note: This stage can be clearly observed if you try to open any
webpage on slow connection. Most modern browsers for better user
experience try to display elements as soon as possible. This gives the
user an impression that the page is loading and have to wait to complete.

Block diagram of the workflow for better understanding

Source HTML5 Rocks

  • Webkit:

enter image description here

  • Mozilla’s Gecko:
    enter image description here

References:(Please read the below links. They are best resources available on the Web pertaining to this topic)

More Related Contents:

  1. Hiding the scroll bar on an HTML page
  2. Browsers’ default CSS stylesheets
  3. See :hover state in Chrome Developer Tools
  4. How can I resize an image dynamically with CSS as the browser width/height changes?
  5. How can I determine what font a browser is actually using to render some text?
  6. What does it mean when a CSS rule is grayed out in Chrome’s element inspector?
  7. Browser support for CSS :first-child and :last-child
  8. Chrome renders colours differently from Safari and Firefox
  9. Sub-Pixels calculated and rendered differently among browsers
  10. How to Identify Microsoft Edge browser via CSS?
  11. When setting a font-size in CSS, what is the real height of the letters?
  12. What does @-moz-document url-prefix() do?
  13. How do browsers deal with non-integer values for height and width?
  14. Where do the lost pixels go in a percent CSS layout? [duplicate]
  15. filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera
  16. What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS
  17. CSS Font Border?
  18. CSS hexadecimal RGBA?
  19. How to overwrite styling in Twitter Bootstrap
  20. How to make child element higher z-index than parent? [duplicate]
  21. CSS – center two images in css side by side
  22. Can I style the resize grabber of textarea?
  23. Fill background color left to right CSS
  24. CSS: background image on background color
  25. What is the difference between outline and border CSS properties?
  26. IE7 and the CSS table-cell property
  27. How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?
  28. Custom tags… why not?
  29. What’s a queryString doing in this stylesheet’s href?
  30. How do I use CSS to position a fixed variable height header and a scrollable content box?

Leave a Comment