What tool can analyze my site and report on unused

Question

how can i find in a early way that this css class is being used or not in website ?

like-

style property that i write in my css is being used or not?

and

class or id is being used in webpage?

exe:

.textstyle4{
    font:normal 12px Arial, Helvetica, sans-serif ;
    color:#777;
}

i want to know in my whole website where this css style is being used?

this is an example.

Answer 1

The CSS Usage addon for firefox does what I think you are looking for: https://addons.mozilla.org/en-US/firefox/addon/10704/

Answer 2

So you want to be able to do something like click a CSS class and have it find all pages on your site that use that class? Not aware of any such tool, kekekela's answer of CSS Usage is probably about as close as you'll get--which will let you find what CSS an individual page uses.

Answer 3

While this is rather old a question, TopStyle 5 kicks out reports about Class Usage, Orphan classes, Undefined Classes, ID Overview and Case Mismatch for whole sites, all linked to the respective file or spot in the stylesheet. However, AFAIK only stylesheets are analyzed, not style blocks or inline styles, but that may depend on the layout of the site. For the sites here style blocks are inserted dynamically, so that may be the reason TopStyle misses them. Of course it's not free.

Answer 4

There's also "Dust-Me", a firefox extension to find unused CSS:

https://addons.mozilla.org/en-US/firefox/addon/5392/

However this plugin doesn't work with FF5+

Answer 5

If you want to see what CSS styles are being applied to an element that is being rendered on your browser you should look into using Firefox and Firebug to view the DOM and CSS information.

http://getfirebug.com/

If you are using IE8 you could use the IE8 Developer tools to do the same thing.

Answer 6

Dust-Me https://addons.mozilla.org/en-US/firefox/addon/5392/