How to generate “computed” CSS for an arbitrary piece of HTML code

Question

I'm starting work on a project to be able to capture an arbitrary HTML fragment (for example, all the code in the <div></div> block) and generate the minimal CSS needed to render the fragment on a blank page while maintaining the same visual style, it is on the original web page. I believe that all the hard lifting for this feature can be found in various libraries and / or codes from open source projects, and I would like to use this work as much as possible. My first impulse is to grab the Firebug source and see how you can use the code associated with the Computed tab. Looking at the StackOverflow community for insights elsewhere, to see and / or approaches to this development. Glad to consider any resources in C, C ++, Python, Perl, PHP or Javascript. Thanks!

(UPDATE: 8 AM 3/4/10)

From the Sinan code snippet below, I can see that there is a standard way to calculate CSS for an INDIVIDUAL element. However, the complete problem is to compute CSS for the whole fragment, i.e. Effectively compute a minimal stylesheet that correctly takes into account the style for the entire DOM subtree (selected root element and all subelements). The beginning of this algorithm may be to traverse the subtree and combine the CSS for all the individual elements, but it actually ignores CSS cascading rules. Thoughts?

Answer 1

Quirksmode can help you,

http://www.quirksmode.org/dom/getstyles.html

Sinan.

---

EDIT:

It was interesting for me, and I made a basic attempt (using some jquery help).

Moreover, it works and gives calculated styles :)

So here is a snippet for getting body styles:

JS:

 $.each(window.getComputedStyle(document.getElementsByTagName('body')[0],''), function(k,v){ console.log(v + ' : ' +$('body').css(v)); }); 

CONCLUSION:

 ... font-weight : 400 height : 608px left : 0px letter-spacing : normal line-height : 13.8333px ...