How do browsers read and interpret CSS?

css browser rendering
Moses picture Moses · Aug 20, 2010 · Viewed 14.6k times · Source

Two part question:

  1. Do browsers have a built-in CSS interpreter like they do for JavaScript?
  2. When exactly does a browser read the CSS and when does it apply the CSS?

Specifically, I would like clarification on how or why JavaScript and CSS are different in that with JavaScript you need to specifically wait until window.onload so the interpreter can correctly getElementById. However, in CSS you can select and apply styles to classes and ids all wily nily.

(If it even matters, assume I am referring to a basic HTML page with an external stylesheet in the head)

Answer

Nirus picture Nirus · Aug 19, 2015

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

Related questions

Mixing percent and fixed CSS

This is a duplicate from UI.StackExchange.com: https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css Should you ever apply percentage and fixed CSS together? Will it cause problems, and if so what kinds? Does mixing degrade browser render performance? Will mixing …

Read More
Describe the page rendering process in a browser?

First of all, I am not interested in the entire request-response process as addressed by this question What is the complete process from entering a url to the browser's address bar to get the rendered page in browser? I want …

Read More
Hiding the scroll bar on an HTML page

Can CSS be used to hide the scroll bar? How would you do this?

Read More