Program that views/saves/strips the CSS that a page actually *uses*?

[TuffGuy]

I've been dealing with some huge/crappy CSS lately, and it would be nice to be able to see/save the styles that a particular page actually uses instead of the ginormous 5000 lines of messy code in the included file that are used for the whole site.

Is there such a thing?

:beer:

 

[MrChad]

Have you tried the Firebug addon for Firefox?

 

[Markbnj]

Originally posted by: MrChad
Have you tried the Firebug addon for Firefox?

Firebug is really a phenomenal tool. You should check it out. But if all you want is to grab the CSS text then do view source on the page in question, and look for either a block of styles at the top, or a relative link to the CSS file. Here is the link from a site I developed:

LINK REL=StyleSheet HREF="css/modalogica.css" TYPE="text/css" MEDIA=screen

You would see that in angle brackets, but I removed those to avoid any issues with the AT forum parser. You can paste the relative link to the file into your browser and retrieve it directly. Make sure to include the fully qualified server name too. IE will open this in notepad. Not sure about Firefox.

Firebug is much more powerful than this simple technique, and will show you things like the cascaded effective styles for a given element, and much, much more.

 

[TuffGuy]

Yeah, but I want to do is grab only the code that that particular page uses, not all the CSS. Ie, i don't want to go through each element and save its CSS. I'd like to find something that only displays the styles that the page needs.

I'm using the Web Delevoper plugin, but that one doesn't do what I need.

 

[bchalker]

I'm dying to find something like this as well.

If you use Dreamweaver, a "workaround" would be a site-wide search for the specific classes and ids you have in the CSS. If none are found on any of the pages, remove them...just a thought. I've done it this way before.

 

[xtknight]

I'm interested to know what the end goal is ("why not just save all CSS?"). Sorry, I don't have any suggestions for such software.

 

[Nocturnal]

Firebug is amazingly awesome. I use it and you should too.

 

[jjones]

The Web Developer toolbar for firefox lets you see the specific css for individual html elements. It's not exactly what you want, but it may help.

Edit. Nevermind, saw you are already using WebDev.

Edit: The Web Accessibility Toolbar for IE will do what you need.

http://www.visionaustralia.org.au/ais/toolbar/

 

[fs5]

http://ajaxian.com/archives/css-redundancy-checker

 

[GoatMonkey]

Another nice tool for viewing CSS is JSView for Firefox. It may not do everything you need, but it gives an easy little pop-up from the status bar that lets you open any stylesheet or javascript file that the page is referencing.