How do browsers parse/render CSS?

Question

What kind of graphical frameworks/technologies do they use to understand and draw CSS instructions? I'm asking, because I would be interested in writing software that uses CSS as a layouting mechanism. Since CSS is a pretty big specification, wouldn't it be incredibly hard to write my own css renderer? (that's why there are so many browser discrepencies right?)

I found this link: How do browsers read and interpret CSS?

But it only says that browsers have their own implementation. So they just have a whole team of people looking after updates on the CSS specifications and trying to implement them as fast as possible? So i can't do it on my own time?

Answer 1

To re-implement all that yourself would be totally and utterly insane!

Simply use an HTML/CSS based thingy like webkit (also wrapped inside the Qt framework). Don't do it all again, you'll just make all the same mistakes...

If you want to analyse how webkit handles CSS, the source code is open.

http://www.webkit.org/

http://trac.webkit.org/browser/trunk/Source

Answer 2

Just want to add some additional information that could be valuable for those, who are interested in the topic and want more details:

How browsers work

To make a quick overview of the document in the light of the question about the parsing part:

1. Browsers do not parse/render CSS - rendering engines (a.k.a layout engines, web browser engines) do so. There is a little difference.

2. CSS can be defined by a context free grammar. The CSS specification defines CSS lexical and syntax grammar (http://www.w3.org/TR/css3-syntax/). Therefore tools as Flex and Bison could be used when creating a CSS parser.

3. Different rendering engines (not browsers) handle the creation of CSS parsers different ways - some use tools as Flex and Bison, other implement their own parsers manually.

Answer 3

Well, new CSS specifications don't come out to often, and since (almost) every browser has their own render engine, they all just implement CSS in their own way, trying to comply with the standards.

CSS is basically deviating from standard properties.

Each element is given cetrain properties or behaviours if you will. CSS allows you to modify or add-on to them.