8

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.

Niels Heidenreich
  • 1,257
  • 1
  • 9
  • 20
  • Related questions: http://stackoverflow.com/questions/33242/how-can-i-find-unused-images-and-css-styles-in-a-website, http://stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions – mercator Aug 25 '10 at 09:33

3 Answers3

6

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.

Niels Heidenreich
  • 1,257
  • 1
  • 9
  • 20
3

As far as tools go, you could use the css usage plugin for firebug. It will analyze pages for used css.

Or were you looking for a way to do it more programmaticly?

CEich
  • 31,956
  • 1
  • 16
  • 15
2

You can try Dust-Me Selectors, it's add-on for firefox, if you use firebug, as you stated, you may find useful CSS Usage.

Sotiris
  • 38,986
  • 11
  • 53
  • 85