7

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Kali Charan Rajput
  • 12,046
  • 10
  • 35
  • 46
  • Can you add an example of how you would want this to work. Not sure if you are looking for a code based solution or just a tool to use to look at the source content and find out. – spinon Jun 30 '10 at 18:09
  • You're confusing the bejeebus out of me. If you want to know what classes/styles are applied to an element then Roberto's answer of "FireBug" is correct. If you want to know what portions of your CSS are used/unused on any given page then Kekekela's answer of CSS Usage is correct. If you want to find all pages which use a specific portion of a stylesheet then you're S.O.L. as far as I know. – STW Jun 30 '10 at 18:15
  • 1
    @KC it means that you're not going to find what you're looking for. My understanding of your question is that you want to do something like right-click a css class and select "Find Usages"--it would be a great feature to have but I'm not aware of any such tool – STW Jun 30 '10 at 18:34

6 Answers6

6

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

heisenberg
  • 9,665
  • 1
  • 30
  • 38
  • 1
    hey i can find this for element but really want that on which element css is applying? this is apposite in this case. – Kali Charan Rajput Jun 30 '10 at 18:10
  • Not sure I'm following you, but it sounds like you might just want Firebug as Roberto suggested...that allows you to select an element and see all the styles that are being applied to it, and also any styles that are being set on it but overridden. – heisenberg Jun 30 '10 at 18:12
  • i always used firebug for about aplly css on element. but i need that where is my class being use in website? – Kali Charan Rajput Jun 30 '10 at 18:15
  • Oh, I don't know of anything. That would be pretty tricky since it'd have to load all your pages and for anything that wasn't totally static content it'd have to somehow figure out all the different html you could render. I think you'd end up having to roll your own for something like that. – heisenberg Jun 30 '10 at 18:35
4

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.

Roberto Hernandez
  • 2,397
  • 1
  • 16
  • 18
1

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+

Community
  • 1
  • 1
desau
  • 3,001
  • 1
  • 24
  • 27
0

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.

JayAitch
  • 175
  • 1
  • 1
  • 10
0

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.

STW
  • 44,917
  • 17
  • 105
  • 161
0

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

Ashit Vora
  • 2,902
  • 2
  • 27
  • 39