How to generate the "computed" CSS for an arbitrary HTML code snippet

Question

I am starting work on a project to be able to grab an arbitrary HTML snippet (e.g. all code within a <div></div> block) and generate the minimal CSS necessary to render the snippet on a blank page while maintaining the same visual styling it has on the originating web page. My sense is that all of the heavy lifting for this function can be found in various libraries and/or code from open-source projects and I would like to leverage that work to the greatest extent possible. My first impulse is to grab the source for Firebug and see how the code related to the 'Computed' tab might be leveraged. Looking to the StackOverflow community for insight on other places to look and/or approaches to this development. Glad to consider any resources in C, C++, Python, Perl, PHP or Javascript. Thanks!

(UPDATE: 8am 3/4/10)

From Sinan's code snippet below, I see there is a standard way to compute the CSS for an INDIVIDUAL element. The full problem, however, is to compute the CSS for the entire snippet - i.e. to effectively compute a minimal stylesheet that correctly accommodates the styling for the entire DOM sub-tree (the selected root element and all sub-elements). The beginning of this algorithm might be to walk the sub-tree and aggregate the CSS for all the individual elements, but this would effectively ignore CSS cascading rules. Thoughts?

you could loop over the nested objects, nothing difficult with JS or Jquery. — dusoft
– dusoft, Commented Mar 4, 2010 at 17:21

Sinan · Accepted Answer · 2010-03-04 00:13:27Z

1

Quirksmode might help you,

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

Sinan.

EDIT:

This was interesting to me and i made a basic attempt (with some jquery help).

More importantly it works and gives the computed styles :)

So here is a snippet for getting body element's computed styles:

JS:

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

OUTPUT:

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

edited Mar 4, 2010 at 0:13

answered Mar 3, 2010 at 23:10

Sinan

11.5k7 gold badges39 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chip Kaye Over a year ago

Thanks Sinan - that link will certainly be helpful in refining the basic algorithm to improve cross-browser compatibility. My question here though is around the core processing - i.e. HTML/CSS parsing, application of standard CSS rules and pruning the resulting tree to the minimal set.

Chip Kaye Over a year ago

Sinan - your code snippet is a helpful start - thanks! See my update to the main post above for more.

Sinan Over a year ago

you're welcome, If you put what i wrote in another loop (such as $('#my_selected_div *').each() ) you can get what you need.

Chip Kaye Over a year ago

Sinan - read my update carefully, especially the last line re: "but this would effectively ignore CSS cascading rules". A simple aggregation of all rules for all elements in the tree is not the same as a stylesheet that implements the styling for the tree as a whole. It's a more complex problem I believe. It might work to compute the CSS for each element and then add a unique class selector to the element, tying it to it's computed CSS, but the resulting stylesheet would grow quickly b/c each single element would effectively have it's own complete CSS definition.

Collectives™ on Stack Overflow

How to generate the "computed" CSS for an arbitrary HTML code snippet

1 Answer 1

EDIT:

JS:

OUTPUT:

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT:

JS:

OUTPUT:

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related