Question

Is it possible to compute resulting css style on the element manually (without need to render it)?

Lets say I’m supposed to have an HTML structure:

<p style="some_style1">
  <span style="some_style2">
    <span style="some_style3">
       TEXT
    </span>
  </span>
</p>

I know what are some_style1, some_style2, some_style3 in terms of JS object (for example i have data for each element like: {font: 'Times New Roman' 12px bold; text-align: center;})

I want to MANUALLY (without need to render in browser the whole structure) compute resulting style that will effect “TEXT”.

What algorithm (or solution) should I use?

Answer 1

There exist browsers that don’t need rendering in a window (headless browser). You can load a page and query what you want. It won’t be easier than in a normal browser to obtain what you ask though.

JSCSSP is a CSS parser written in cross-browser JavaScript that could be a first step to achieve what you want from scratch or quite. Give it a stylesheet and it’ll tell you what a browser would’ve parsed. You still must manage:

• the DOM,
• inheritance of styles,
• determine which rules apply to a given element with or without class, id, attributes, siblings, etc
• priorities of selectors
• etc

Its author is D. Glazman, co-chairman of the W3C CSS group and developer of Kompozer, NVu and BlueGriffon so it should parse CSS as expected 🙂