Hi GUys,
Having a problem at the moment that many of my pages load [using GooglePageSpeed] and seem to load a lot of unused CSS.
If I try and split the CSS - then I get the error that "too many CSS files". I am wondering whether there are any jquery plugins [or other] that are able to RENDER only the CSS for the page that is being loaded and ignore the rest ?
It's sort of like a dynamic CSS interchanger ? Would really help ....
Unless you are sending hundreds of kb of css then it shouldn't really matter.
A dynamic CSS changer would destroy the caching ability of the browser resulting in higher transfers.
http://github.com/anthonyshort/csscaffold would help, it doesn't remove what you don't need but it does compile it to one small file.
Removing unused CSS would need some javascript which would slow down more then the solution above.
I would suggest you to go for Dust-Me Selectors (addon of firefox) to check unused css and delete it for specific pages. Note this is not something allowing you to delete on-the-fly though.
Seems to me, that it will be bad practice to optimize your css on the fly. Neither on server's side, nor on the client's because it will decrease performance of server/user's browser.
If CSS size is so important for you, it would be a better way to manually create some pre-optimized stylesheets for each global types of pages used in your web application and switch between them. For this needs, there is one more useful addon for Firefox's Firebug, named CSS Coverage. It allows you to scan multiple pages of your site to see which CSS rules are actually used in your site per each page or per many.
