CSS Tools

Regarding CSS, I know the W3C validator. But does it exist a tool which takes an html page (and the style sheets linked) and output the list of unused css tags definition (not used in the page) ?
I found some web page analysers and css validators but not a tool where useless tags are highlighted. Any tricks ?
Thanks.

Thanks GaneshXL

I have also found this FF extension: http://www.sitepoint.com/dustmeselectors/
One limitation of this type of solution is that we can’t provide a set of several html pages to check that what are the unused selectors. But is it a first step

You can test pages individually, or spider an entire site, and you’ll end up with a profile of which selectors are not used anywhere.

http://www.sitepoint.com/dustmeselectors/

It seems you both recommend the same tool, which I didn’t know of... cool, thanks !
But that was to be expected of sitepoint...

Thanks Sottwell. To be honest I didn’t read the presentation page. I download and test directly the software ! and I saw this limitation. But as described :

that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.

, if you follow the automation and then spider web site options menu, you can analyse a complete set of html pages.

Not really related but I once used a demo of a tool that would read an html doc and return all the stylable element being used on that page (elements, ids and classes). I never found that tool again, does anyone know what I am talking about?

Not really related but I once used a demo of a tool that would read an html doc and return all the stylable element being used on that page (elements, ids and classes). I never found that tool again, does anyone know what I am talking about?

Firefox Web Developer Extension?

Quote from: MadeMyDay at Jan 23, 2008, 11:45 PM

Not really related but I once used a demo of a tool that would read an html doc and return all the stylable element being used on that page (elements, ids and classes). I never found that tool again, does anyone know what I am talking about?

Firefox Web Developer Extension?

Thanks but that is not really what I meant (I have that one ). This tool could get an unstyled raw html document and setup a blank style sheet with all the elements + styles + ids used in the document. Great for a starting point when styling. I generally start with the unstyled html and then do the css, and no matter how organized I try to be I always end up looking through the markup to remember what elements are being used etc.. I guess it is a reverse to the sitepoint tool where instead of mapping based on the css it will map hased on the html.

Quote from: dev_cw at Jan 24, 2008, 05:47 AM

Thanks but that is not really what I meant (I have that one ). This tool could get an unstyled raw html document and setup a blank style sheet with all the elements + styles + ids used in the document. Great for a starting point when styling. I generally start with the unstyled html and then do the css, and no matter how organized I try to be I always end up looking through the markup to remember what elements are being used etc.. I guess it is a reverse to the sitepoint tool where instead of mapping based on the css it will map hased on the html.

Hm. Wouldn’t that create a huge overhead when listing all Elements? I usually use nested elements to apply different styles. Eg. #menu ul might get another style than #menu ul ul
Generating an output of every element type (flat) would be not enough and generating a file with all possible nested combinations would be a huge overhead? It could be useful to parse the document for all classes and ids though. That could be done with a simple javascript that parses the DOM?

Thanks but that is not really what I meant (I have that one Grin). This tool could get an unstyled raw html document and setup a blank style sheet with all the elements + styles + ids used in the document. Great for a starting point when styling. I generally start with the unstyled html and then do the css, and no matter how organized I try to be I always end up looking through the markup to remember what elements are being used etc.. I guess it is a reverse to the sitepoint tool where instead of mapping based on the css it will map hased on the html.

Ah okay, already wondered if you missed this button ;-) Interesting tool which you describe, but

Hm. Wouldn’t that create a huge overhead when listing all Elements? I usually use nested elements to apply different styles. Eg. #menu ul might get another style than #menu ul ul
Generating an output of every element type (flat) would be not enough and generating a file with all possible nested combinations would be a huge overhead? It could be useful to parse the document for all classes and ids though. That could be done with a simple javascript that parses the DOM?

Good point, too...