14

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.

Umber Ferrule
  • 3,358
  • 6
  • 35
  • 38
martok
  • 479
  • 2
  • 6
  • 11
  • Dust-me selectors *is* compatible with Firefox 3.6, but not (currently) with any later versions. – Spudley Jul 11 '11 at 12:41
  • @Spudley thanks, but that's the error message I encountered when I installed via the Mozilla site. – martok Jul 11 '11 at 12:46
  • I had it installed and working on my FF3.6 until I upgraded, so... *shrug*.... (and the [Mozilla addons page](https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/) states it is compatible with 3.6, but you probably already saw that). – Spudley Jul 11 '11 at 13:05
  • @Spudley yeah, I saw that, which made me think it should work, I tried to install again but it didn't work. Perhaps the version you had installed was < 2.2 – martok Jul 11 '11 at 13:12
  • Update for posterity: Dust-Me Selectors v3.0.1 is currently working for me on Firefox 12. – Funka Jun 15 '12 at 22:01

8 Answers8

14

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.

Audit

Robert
  • 21,110
  • 9
  • 55
  • 65
  • 3
    This works, however for large project's it can be a PITA... You end up having to run it manually across pages and diffing them – Eddie Jul 11 '11 at 12:41
  • Thanks, I can't install any other browser though. – martok Jul 11 '11 at 13:13
  • 2
    It would also be lovely---unless I just didn't see how to do this---if this tool could export a cleaned CSS file minus the "unused" selectors. We inherited a Joomla site with about 94% unused rules across hundreds of selectors and dozens of files that we'd like to remove, but the manual approach is so unappealing we're probably going to just leave it all. – Funka Feb 08 '12 at 00:36
2

I've been looking for a while, and the best thing I found was this:

http://unused-css.com/

They scan your site and email you the result css.

I am aware you are working on a localsite, however if you find no alternative, you can upload your site somewhere and use this

Alternatively

You could install a previous version of firefox that is compatible with dust-me selectors and run it along side your current installation of firefox.

Eddie
  • 12,898
  • 3
  • 25
  • 32
  • After some considerable time looking this seems like the only option available at the moment. Thanks – martok Jul 11 '11 at 15:23
  • just a note that unused-css.com don't let you download the CSS without you being a paid member and lowest plan starts at $29 a month! seems a bit expensive for the service to me – georgiecasey Oct 08 '16 at 19:53
  • Thanks @georgiecasey but please note this was answered in 2011 when it was not a payed service... – Eddie Oct 08 '16 at 20:07
2

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.

spliter
  • 12,321
  • 4
  • 33
  • 36
  • Thanks, this at least installed. I'll give it a whirl. – martok Jul 11 '11 at 12:52
  • 1
    Grr, it seems not to work any longer, I'm getting the the "CSS Usage: initializing extensions" error like these folks: https://addons.mozilla.org/en-US/firefox/addon/css-usage/reviews/ thanks all the same – martok Jul 11 '11 at 13:02
1

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

gagarine
  • 4,190
  • 2
  • 30
  • 39
0

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?

Umber Ferrule
  • 3,358
  • 6
  • 35
  • 38
0

There is a new program at sourceforge called CSS Scanner, it scans for used and unused css classes and stylesheets in html, aspx, php, javascript and jquery code. It's .net code so you'll need Windows: http://sourceforge.net/projects/cssscanner/

Markus Szumovski
  • 114
  • 1
  • 4
-1

  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/

Community
  • 1
  • 1
Gaurav Mishr
  • 572
  • 6
  • 21
-2

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

simal
  • 9
  • 2