This question already has answers here:
How to identify unused CSS definitions from multiple CSS files in a project
(3 answers)
Closed 1 year ago.
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.
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.
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.
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.
dust-me-selectors Firefox addon is now compatible with Firefox 16...
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?
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/
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.
And this one involves grunt and related plugins to find unused code
http://addyosmani.com/blog/removing-unused-css/
If you are familiar with node js you can also use "find unused css": https://www.npmjs.com/package/find-unused-css
Related
This is a question about bug tracing. I have a WP site in which I am experiencing a plugin conflict. One of the plugins is applying "display;none" to some elements in a slider. What I am wondering is whether there is a good method for knowing what code is setting that css?
You can find it usually with firefox + firebug, firefox' own inspect element, chromes developer tools etc, when you inspect an element it tells you which .css file is being used.
Alternatively, if you turn off all your plugins and enable them one by one you can tell where the conflict is and check that plugins folder. If you have access to the plugins folder on your server you can see if there is a .css file in there - or open the main .php file as some plugin devs put their css straight into there.
But using a developer tool should give you an idea as to where the css is being generated. Even if it is dynamic, combining developer tools with simple plugin troubleshooting will narrow the information down enough to give you the jist of where it is.
My environment is Visual Studio 2010 with Resharper 6.0. I have a large website with many CSS files with many styles.
I would like to tidy these up as a lot of them are no longer used, I noticed that Resharper allows you to track usages but obviously this can miss out CSS class specifications in code-behind etc.
My only solution is to do a Find In Files in VS but obviously when you have a large amount of styles this proves too slow and cumbersome.
Has anyone had a similar predicament?
EDIT: It's worth mentioning that the site is a CMS comprising around 10,000 pages, so anything that requires browsing pages might also be a bit tricky.
There is a firefox extension called dust me selector that does this. You enable it and then navigate to each page. It keeps track of all used css. You spit out a new css file with all the tracked css styles.
The Web Essentials Visual Studio Extension has a BrowserLink feature which comes with a way to track unused css in your site while you browse around the site.
A way to do that is running your site in a headless browser like PhantomJS and inspecting the styles applied in order to remove the ones not being used.
Fortunately, there is a nice tool built on node called uncss doing exactly this:
https://github.com/giakki/uncss
I found it here:
http://addyosmani.com/blog/removing-unused-css/
About browsing all those pages, well, I dunno, if you can generate all the possible URL's then you can automate the process.
Give it a try and let me know if it helps.
I have a page that calls about 32 stylesheets. On another page, it calls < 30. In every other browser both pages look fine, but on the first page in IE (8, 7), the last 2 stylesheets aren't being called and it totally messes up the layout. I'm not really sure how to get around this in drupal.
EDIT:
Also, I understand that having more than 30 is not that great, but that is how our site was developed originally. We have a bunch of themes and modules that add syleshets using "drupal_add_css".
I tried compressing the css by going to admin/settings/performance but the stylesheet link doesn't work because we are using a port number for our test site (http://mysite:123) and the link generated is http://mysite/public/css/random_string.css
You can use admin/settings/performance and set Optimize CSS to true. This will put out 1 css instead of 32+. If you are developing and want this on to work in IE, you need to clear the cache after changing your css. We tend to leave this off in development & only turn it on to test in IE or for production.
All best,
ember
Answer to Alison's comment (too long for a comment block)
Hi AlisonC,
I've never tried using a port for a site with Drupal. I'd suggest making sure your settings.php for your site are setup correctly. There may need to be a special name for your folder (see the instructions at the top of settings.php) or you may need to check the $base_url and make sure it has the port.
If that doesn't work, there's a module for caching css while developing (http://drupal.org/project/ie_css_optimizer). I haven't used it, but it may work a little differently at least for your situation. (After typing this I noticed another user also recommended it).
I've been assuming you're still developing, and I would remove the ie css optimizer module (or at least turn it off) before going live, since it's primarily a developer helper. I think this is the limit of my knowledge. Good luck!
--Ember
This is a known limitation with IE - you cannot have more than 31 stylesheets on any given page.
References:
http://john.albin.net/css/ie-stylesheets-not-loading
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/ad1b6e88-bbfa-4cc4-9e95-3889b82a7c1d/
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx
The only real solution you have is to combine your stylesheets so you have fewer individual CSS files (use Drupal's "Optimize CSS" option). But I acknowledge this may be a pain if you're trying to debug your code, etc.
In fact, it is possible to load a lot more than 31 stylesheets into IE, but for any more than 31, you need to do it via an #import line inside another CSS file. This isn't really possible in the context of a Drupal site, where each stylesheet is added by a module, and you don't really have control of how Drupal adds them to the page.
How are they being loaded? 30 individual <link href="blahblah.css"> calls? Or from other stylesheets with #import directives? Remember that if there's a syntax error, further processing of a stylesheet will fail.
http://drupal.org/project/ie_css_optimizer
...is what we use. Theme debugging is a pain with CSS optimization turned on. D7 uses the #import method this module implements to get around the issue.
There is actually a module to deal with this. I haven't used it personally but it does have 5K+ users (Drupal 6).
Are there any utilities that will crawl a site and determine which css rules are in use and which are not? We have a large site and a huge CSS file (--don't blame me I just got here). And, I think much of it is not being used however I'm afraid to strip stuff out just in case.
The file is confusing and difficult to manage and I think if we can trim it down by getting rid of the unused rules we will have a good starting point to go through and try to make it better.
Try the Dust-Me Selectors Firefox extension by SitePoint. It finds CSS selectors whose rules are never applied to your pages so you can remove them from your stylesheets.
https://addons.mozilla.org/en-US/firefox/addon/10704/?src=collection&collection_id=23d14a2d-b396-c08f-e9ba-b4d34691d5a9
It's an addon in Firebug.
I had the same problem a while ago (5k lines in a CSS) and found this Firefox Plugin which worked very well for me.
The Google Page Speed plugin for Firefox's Firebug addon is also a great tool that will highlight the unused CSS selectors as well as inform you which ones are poor performers.
As always though, you need to be aware that the CSS selector may not be used on "this" page but may very likely be used on another page so be careful when pruning them to ensure they are truly unnecessary.
You can use a service like Unused-CSS
This web app explores the pages of your site and builds clean CSS files
My project has collected CSS entropy (unused classes) during its course of development.
Now in order to keep the CSS file small, I want to remove all unused CSS references. But doing that manually involves searching for each class in the entire project. That takes time.
Do you know of any way/tool which I can adopt to find out which CSS classes are no longer used in my project, and remove it?
I am programming on ASP.NET. Visual Studio.
In the Chrome Browser, press F12, go to the Audit tab, choose the "Reload page and audit on Load" option, and refresh the page. Chrome will list all the unused CSS rules.
For an online solution, go to unused-css.com.
You might find this Firefox extension useful: http://www.sitepoint.com/dustmeselectors/
I wrote a tool which allows you to find all class and CssClass attributes in your aspx source code.
See my blog entry for info and download.