Forum Moderators: not2easy
Since CSS works like a programming language, I wonder if there are CSS-Optimizers, CSS-Distillers or CSS-Compilers out there which go through the code, weed out any unneccessary instruction, and give me a clean, lean stylesheet which not only does what the previous one did as well but also loads faster.
I am NOT talking about the tools which simply take out all the linewraps to make the file smaller. Some of them also compress color statements - that's a first move into what I talk about. But still they treat the CSS mechanical, where I am looking for a tool which "understands" my CSS and recompiles it.
So, anybody knowing such a tool?
No help sorry, but it would be a great tool if someone could build one, I imagine the biggest problem would be dealing with different type and/or specific selectors to isolate when an element even matches also if there's multiple stylehsheets, it get's much more difficult unless there would be a way to load many stylesheets in cascade order
a
a:link
div#nav a:link
html>body #navcontainer li *
#nav>a:hover
is there an odd one out?
has anyone has come across anything remotely useful in this area, I seem to spend so much time just rearranging stylesheets so I can "see" ~ when I first get a "fix it" job :o
Tools like the FF Web Dev bar make it easy to spot what CSS is/are actually in play on an element, which is useful for pinpointing, but that still involves a manual check on each element and page and what's to say you "fix it" for one page but it breaks another.. it's not a perfect solution by any means
WEB Dev Toolbar > CSS > View Style Information (Ctrl+Shift+Y), cursor will change to crosshair - then click on an element and it will open a new page showing all the styles (from all sheets, it will show you which stylesheet they're in too) which are in play on the element. At least it less to troubleshoot :)
Suzy
What I am looking for goes BEYOND all these. Consider this situation:
<body>
<div id="content">
<a href="x">x</a>
<div id="subcontent">
<a href="y">y</a>
</div>
</div>
</body>OK, now I have this CSS:
a {color: red;}
#content a {color: red;}
#content #subcontent a {color: red;}
#subcontent a {color: red;}So basically all except for the first rule are redundant. So the tool I envision should detect this, and remove the other 3 rules.
This can even go one step beyond, but then the tool must analyze the associated HTML as well:
<body>
<div id="content">
<div id="subcontent">
<a href="y">y</a>
</div>
</div>
</body>a {color: red;}
#content a {color: green;}
#subcontent a {color: blue;}In this case, the tool needs to find out that the green and the red link color is nowhere to be used, so it should change the CSS to:
a {color: blue;}The more complex the code gets, the more sophisticated such a "CSS recompiler" needs to be.
If only I would be any good at programming...
I think maybe the SE CSS parsers will cover the first bit first assuming they're ever going to be able to weed out redundant rules in order to detect "naughty" things. Perhaps once they conquer the Cascade they'll throw out a tool as an aside.. dreams..
bruhaha, thanks will take a look
Perhaps once they conquer the Cascade they'll throw out a tool as an aside..
Well, I think THAT is too much dreaming. But the initial idea is valid: once the SE spiders have "mastered" (as you call it) CSS and have figured out how to distill it down to find out all the dirty tricks (where "display:none" is just the simplest one), then I think we will see 3rd party tools which will perform similar tasks (and hopefully the one I envision) too.
The complexity is simply daunting.
But from there to optimizing your CSS and suggesting improvements ...?
From there, a human can take over.
