How to Find Unused Images and CSS Styles in a Website

find unused images, css rules, js script blocks

Unused CSS

1. Take a look at the Firefox extension Dust-Me at http://www.sitepoint.com/dustmeselectors/.

2. Google Chrome has a website auditing tool in their developer console.

3. Also I found this site for removing unused css - http://unused-css.com/ .
   Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The @import statement is not supported. You can't configure and download the new clean CSS file.

4. Helium CSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.

5. CSSESS is a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.

6. How can I find unused images and CSS styles in a website?

Unused Images:

1. http://obsidience.blogspot.in/2008/06/using-powershell-to-find-unused-images.html
2. How Do I Make a Bash Script To Find Unused Images in a Project?

Unused JS:

1. Find unused CSS rule and js script in a web project?
2. Find unused Javascript functions?

Find unused css

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.

Is there a way to check which CSS styles are being used or not used on a web page?

Install the CSS Usage add-on for Firebug and run it on that page. It will tell you which styles are being used and not used by that page.

Removing unused CSS from website code

You can get pretty close to what you are asking for with the Google Chrome's Audit tab under Developer Tools. It does not remove unused CSS, but it will show you what CSS rules are not being used.

Observe:

---

Related Topics