Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to get a list of all the CSS applied to a HTML fragment or page?

Tags:

html

css

analysis

I know it's easy to get the CSS that is applied to a single node in HTML, using tools like the Firebug extension for Firefox, etc.

But is there a way to see all the CSS that is in effect on an entire page, or a larger fragment of HTML?

Specifically, we are cleaning up our one extremely large CSS file into smaller modules and would like to find out what CSS is used on a certain page, so we can move all the non-used CSS to another module.

like image 918
Niels Heidenreich Avatar asked Aug 25 '10 09:08

Niels Heidenreich


1 Answers

Thank you all! These are the various solutions I've looked at now from your recommendations (collected here for people with the same problem):

Dust-Me Selectors (Firefox Add-on)
This does exactly what I need. Lists used and unused CSS selectors (for the current page, or the entire site, after spidering), and can dump both lists as CSV text. Great.
https://addons.mozilla.org/firefox/addon/5392/

CSS Usage (Firefox Add-on)
https://addons.mozilla.org/firefox/addon/10704/

WARI - Web Application Resource Inspector (Java tool)
Appears to only handle static code, not dynamically generated HTML as is present in most web applications that use ajax – which, unfortunately, makes it useless, at least for me
http://wari.konem.net/

CSS Redundancy Checker (Ruby script, requires Rubygems and Hpricot)
http://code.google.com/p/css-redundancy-checker/

TopStyle (Windows-only application, $79.95 (!!))
http://svanas.dynip.com/topstyle/

These are all cross-platform and free, except for TopStyle.

like image 120
Niels Heidenreich Avatar answered Sep 20 '22 21:09

Niels Heidenreich