Online web tool that optimises CSS (and HTML) for you

[BabyJeffy]

I stumbled across this tool whilst trying to help someone optimise their CSS code. It's an online tool (again... free) that can take the URL of a CSS file (or you can paste in CSS directly) and based on some simple checkbox options it will automagically optimise the CSS. Any opportunity to trim my page weight down is worth it... and the optimisations that this tool makes are non-destructive.

http://flumpcakes.co.uk/css/optimiser/

As a test I optimised the primary CSS file for TekTips and (with "Pretty printing" formatting turned off as recommended) I managed to get a 14% saving on the original file size!

There is a nice formatter (and code tidier) for HTML as well (great for tidying up legacy HTML code and at the very least formatting so it's readable):

http://flumpcakes.co.uk/css/html-tidy/

So many cool tools to use! Hope you get some mileage from these.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[BabyJeffy]

OK - no sooner had I posted than I thought to check some of my open windows. Here is another free CSS optimiser that appears to offer more options (and is also available in German).

http://cdburnerxp.se/cssparse/css_optimiser.php

The very same CSS file for TekTips compressed by 22% of it's original size (although this is not readable and has no whitespace etc).

I have to say I would use this over the one I initially posted for generating highly compressed (but unreadable) final CSS for a production site.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[ChrisHunt]

Interesting image in the title bar of that first site, Jeff. Note that both CSS optimisers strip out any comments from your CSS - which limit their value as a code formatter.

They can can also "optimise" out your CSS hacks. Here's a rule from one of my stylesheets intended (amongst other things) to set the font to a particular size:

#sidebar h4 { 
   margin: 0 21px 0 0; 
   padding-left: 2px; 
   font-weight: bold; 
   font-size: x-small;
   voice-family: "\"}\"";
   voice-family: inherit;
   font-size: small; 
}

IE5.x has its fonts out of step with everyone else, so the voice-family hack is used to pass font size x-small to IE5 and small to everthing else. The optimiser (correctly, really) recognises that there's no point in declaring the same thing twice in one rule and removes the IE5 value and hack:

#sidebar h4 {
padding-left:2px;
font-weight:bold;
voice-family:inherit;
font-size:small;
margin:0 21px 0 0;
}

Be careful out there.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BabyJeffy]

Agreed... the second CSS parser specifically provides an option to preserve IE-Hacks hacks (and the extra / you may have throughout properties). So in that regard the second could be considered better than the first.

Now you draw it my attention, leaving comments in the "pretty" page output would have been really useful! I'll email the author

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]