Find unused css

Question

I'm doing some development for some pages on our internal network. I want to know if there's an open source tool or FF plugin which can identify unused css within a project.

I've looked at using this, but when I try to install the Add-on Installer says "Not compatible with Firefox 3.6"

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Please note, this is for an intranet - not a www visible website - so I can't use the online sites which offer such services.

Answer 1

Is it possible to combine all of your HTML pages together into one single page, for example using:

type *.htm > all-pages.htm

Then you could run Firefox/CSS Usage on this single, 'super' page?

Answer 2

1. Chrome addon, which generate stylesheet of css rules effectively used in a page, can be tried for the quick results..here is the link

   https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh It also gives summary about the rules, which are not been used.

2. And this one involves grunt and related plugins to find unused code http://addyosmani.com/blog/removing-unused-css/

Answer 3

Google Chrome (and therefore probably Safari as well) have the developer tools installed, which come with Audits. When you audit the page, the unused CSS rules is one thing it checks.

Here's what it looks like on this page.

Answer 4

If you are familiar with node js you can also use "find unused css": https://www.npmjs.com/package/find-unused-css

Answer 5

dust-me-selectors Firefox addon is now compatible with Firefox 16...

Answer 6

I have CSS Usage installed in FF. But barely used it once. It searches for un-used CSS on the current page, not the whole project though.