Web-Based Tools for Optimizing, Formatting and Checking CSS

Jul 12 2008 by Jacob Gube | 26 Comments

Stylesheets can get large real quickly, both in terms of length and file size. To ensure that your web pages render correctly and quickly, here’s a compilation of some of the best free, web-based CSS optimizers/compressors, code formatters, and validation services. Check them out and pick the ones that work best for you.

Optimizing and Compression

CSS Optimizer

CSS Optimizer - screen shot.

CSS Optimizer is a simple online optimizer that processes your current CSS and outputs the compressed version. You have the option of linking to the URL of your stylesheet, uploading a CSS file, or directly inputting your styles. It’s a simple tool that’s "plug-and-chug" – there are no options, so the optimization procedure will remain the same for all your inputs (great if you’d like to standardize compression settings).

Clean CSS

Clean CSS - screen shot.

Clean CSS is based on the popular CSS minifier, CSSTidy. You can set your desired compression level (the trade-off to higher compression is more difficult readability) and customize compression options. It prints out a line-by-line report afterwards to show you exactly what’s been changed. Also check out CSS Formatter and Optimiser, which uses a more recent version of CSSTidy (1.3dev).

CSS Drive Gallery- CSS Compressor

CSS Drive Gallery- CSS Compressor - screen shot.

CSS Drive’s CSS compressor has two modes, Regular mode and Advanced mode (which has a few more options that you can set). You can remove the comments (strip comments option) or specify to strip comments that exceed a certain character limit, thus retaining comments that are short. Regular mode is perfect for those that aren’t picky – just choose between Light, Normal, and Super Compact compression and you’re ready to rock.

Online CSS Optimizer

Online CSS Optimizer - screen shot.

Online CSS Optimizer is another simple CSS optimization tool based on the CSS optimizer command-line application for OS X and Linux. You have two ways to input your CSS: either via the text box provided on the page or directly linking to your stylesheet. Sometimes you’ll find that you need to reverse the compression – you can do so by using the Uncompress CSS application on the site.

CSS Compressor

CSS Compressor - screen shot.

Another popular web-based CSS compression tool is Robson’s open-source CSS Compressor, (check out the CSS Compressor PHP source code). There are plenty of compression options you can set that deals with colors, measurements (units), rules, and CSS properties. CSS Compressor also provides a useful Combine utility for simultaneously combining and compressing up to three separate CSS files.

flumpCakes Style Sheet Optimizer

flumpCakes Style Sheet Optimizer - screen shot.

The flumpCakes Style Sheet Optimizer is another optimizer and formatter with a few options. It gives you the choice of automatically combining background, font, list, and border attributes into short-hand notation and a Pretty Print option that standardizes code format. One cool feature is the Backlink feature which provides you a URL that you can bookmark and return to anytime to view your stylesheet’s compressed state.

Formatting

FormatCSS

FormatCSS - screen shot.

FormatCSS allows you to paste your valid CSS code, correcting and standardizing your source code. There’s several available settings and rules that you can apply to achieve the type of format you desire – including ordering your CSS alphabetically, de-capitalizing your code, and some options for dealing with styles.

prettyprinter.de

prettyprinter.de - screen shot.

prettyprinter.de isn’t limited to CSS – it also formats PHP, Java, C++, C, Perl and JavaScript – so it’s a terrific "one-stop-shop" for your formatting needs if you happen to work with any of the other supported languages. It has a total of 13 different options you can set including "Reduce Whitespace", "Remove empty lines", and automatically adding new lines after curly brackets.

Tabifier

Tabifier - screen shot.

Tabifier is multi-language web-tool specifically designed for standardizing indents in source code. It supports HTML, CSS, and C Style. It’s a simple tool, excellent for quickly formatting your indents.

Validating and Checking

The W3C CSS Validation Service

The W3C CSS Validation Service - screen shot.

Perhaps the most common web-based validation service for CSS is the W3C CSS Validation Service. It’s very simple to use, just enter the URL of your stylesheet and it will output the status of your stylesheet and point out errors, warnings and other issues.

Juicy Studio: CSS Analyser

Juicy Studio: CSS Analyser - screen shot.

Juicy Studio’s CSS Analyser combines the W3C validation service with additional checks of color contrast (helpful for vision-impairment accessibility issues) and units of measurement used in your source code. You can input the CSS either via the URL or copying your code onto the text box provided on the page. The result is a very detailed breakdown of errors and warning about your CSS, similar to the W3C CSS Validation Service.

CSS Redundancy Checker

CSS Redundancy Checker - screen shot.

CSS Redundancy Checker is a simple tool for checking to see if you have redundant styles that can be combined together. This reduces unneeded styles and is a good way to check your work. It’s a three-step process: simply link to your stylesheet, put a few pages that use the stylesheet, and press the "check" button. The output is a detailed list of suggestions and places where you can reduce code by combining redundant styles.

If you’ve used any of the tools above, please share your experiences (good and especially bad) with us in the comments.

Since these are automated and have standard processing methods, please exercise caution and use your own judgment when using the outputs – things can get badly broken so do thoroughly test the results!

If you liked this post, these other posts might also be interesting to you:

26 Comments

liam

July 12th, 2008

Very nice stuff, something I’ll be coming back to a lot I’m sure.

Matt

July 12th, 2008

Awesome list. This is just one more thing I’ll use in the future from you. Optimizing is something I need to do sometime.

Sumesh

July 13th, 2008

Useful tools. I’m an optimization enthusiast but got a bit unnerved by CleanCSS’s overzealous stripping of !important comments and have been looking for alternatives. This list should help.

Stumbled and subscribed.

Selvagk

July 13th, 2008

Gud list ! Thanks

Vladimir

July 13th, 2008

Great list! I usually use Clean CSS.

Chris

July 14th, 2008

I used the flumpcakes one to reduce over 20,000 characters in our CSS at work.

istioselida

July 15th, 2008

very useful list, until now i only have used the W3C CSS, but now i will try some of the other tools that you suggest!!

United Voices

July 15th, 2008

This is very useful resources though I am familiar with some of these sites already.

ben

July 18th, 2008

great, looks very useful

Bryan

July 18th, 2008

Both CSS Optimizer and FlumpCakes performed poorly. FlumpCakes was the better of the two in terms of resulting in less damage to the site’s appearance, but CSS Optimizer did a “better” job compressing (perhaps compressing too much).

I will try a few of the others when I find the time. Thanks for the resources—as always.

Farid Abdulhadi

July 18th, 2008

I just started working on a post about front-end optimization and this list is perfect for me to go through.

Thanks.

gaiusparx

July 23rd, 2008

Thanks for the useful list. Just when I needed after getting my site up.

Dejan Cancarevic

July 23rd, 2008

very nice collection, thanks Jacob!

brothercake

July 23rd, 2008

One major omission — http://www.sitepoint.com/dustmeselectors/

Tom Leo

July 31st, 2008

Hey great guide, I will defiantly check out some of the ones I have not heard of. Some of these look like they will be quite handy.

Wesley

August 6th, 2008

In my opinion the best css compressor that also has validation built in is Text Mate – http://macromates.com/ – it has a css bundle for all of you css needs… but it’s not free.

Text Mate is used heavily in the programmer’s realm and may be a bit overkill for the average designer but its a VERY powerful tool.

Gareth

September 8th, 2008

another good example is http://cssslick.co.uk

Avery

July 14th, 2009

very nice collection, thanks Jacob!

Kumar Shah

October 21st, 2009

Thanks Jacob !!! It saved my bunch of time. :)

Mark Darling

September 8th, 2010

The Firefox plugin Dust-Me Selectors

https://addons.mozilla.org/en-US/firefox/addon/5392/

is also often useful for notifying you of unused styles within the CSS.

Craig

September 8th, 2010

Great collection of resources, Thanks

Elaine

September 9th, 2010

Thank you, great list :)

dselva

September 17th, 2010

Thanks for the collections

Craig

October 15th, 2010

Wesley, Text Mate is for Mac only. Mac have about a 2% share of the OS marker. [Removed]

Sam

June 6th, 2013

Hi Jacob,
I developed an CSS Online Minifier for CSS. The Tool optimizes your code and removes unnecessary comments and stuff. Check it out: http://csslift.t3premium.de/

Leave a Comment

Subscribe to the comments on this article.