Welcome to WebmasterWorld Guest from 54.205.170.21

Forum Moderators: not2easy

Message Too Old, No Replies

CSS "distiller" - optimize stylesheets

Weed out the dead wood

   
9:39 am on Feb 2, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



As usually, I started out with the small CSS my CMS generated, and step by step extended so it now works as I want it to. However, this process attracts duplicate rulesets, repeated explicit defintion of inherited elements etc. I think that maybe 30% of any given CSS are redundant instructions which can be eliminated without changing the design.

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?

4:11 am on Feb 3, 2006 (gmt 0)

10+ Year Member



[jigsaw.w3.org...]

It's not going to fix them for you automatically, but it will point out errors.

8:30 am on Feb 3, 2006 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



pmkpmk..

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

9:13 am on Feb 3, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks. Maybe I should have mentioned that I know (and use) the validator as well as the FF toolbar as well as a beautifier based on CSSTidy (feel free to scrap the URL if it's against TOS: [cdburnerxp.se...] ).

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...

6:16 pm on Feb 3, 2006 (gmt 0)

10+ Year Member



I haven't explored all its capabilites, but might TopStylePro (probably not the free version) help with at lest some of this?
6:38 pm on Feb 3, 2006 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



pmk. I kinda thought you were after something like that,
but taking it to the next level and cleaning the HTML too now that I would like to see, in these days of templates/blogs/cms an element may not be present on one page but there on another, it would be nice though :)

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

1:18 pm on Feb 5, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

1:24 pm on Feb 5, 2006 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



With the possible complexity of selectors and inherent need for overriding rules under certain circumstances I doubt it is something that can be done. Not only would such a tool require the parser to be able to read (and understand) all sorts of CSS selectors, but also read and understand HTML and the element cascade.

The complexity is simply daunting.

8:17 am on Feb 6, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Can't this be based on browser technology? A browser has to understand all of this...
8:21 am on Feb 6, 2006 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



It would probably be best if it came from the browser industry. Shouldn't be a problem to get a devtool working in Mozilla which could tell you whenever a style was overridden by something else.

But from there to optimizing your CSS and suggesting improvements ...?

8:49 am on Feb 6, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Telling if a style gets overridden (correct grammar?) is the first step. Telling if a style is used at all the second. Combining this with a very simple walkthrough through all pages of the site gives you a very clear indication which styles are used and which aren't.

From there, a human can take over.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month