CSSTidy – CSS parser and optimiser

CSSTidy - CSS parser and optimizer

CSSTidy is an open source Cascading Style Sheets (CSS) parser and optimiser written by Florian Schmitz. C++ and PHP versions are available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality). The name derives from HTML Tidy, since CSSTidy is supposed to be its counterpart for CSS. Currently CSSTidy is able to fix some common errors (like missing units or semicolons) and reformat and compress CSS code.

Contents:
1 Features
2 Examples

In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

If you optimise your CSS code you have faster loading pages and lower traffic costs. So both you and your visitors benefit from an optimisation.
The importance of clean CSS code:

The current version of CSSTidy is 1.3. This version was noted in the changelog on July 19, 2007 as the last version. The project was abandoned and the author is seeking a new maintainer for the project.

However, the PHP version has been forked by developers.

CSSTidy Features

Here “s” stands for all selectors and “margin” stands for all properties:

  • colours like “black” or rgb(0,0,0) are converted to #000000 or rather #000 if possible. Some hex-codes are replaced by their colour names if they are shorter;
  • s{property:x;property:y;} becomes s{property:y;} (all duplicate properties are merged;
  • “margin:1px 1px 1px 1px;” becomes “margin:1px;”;
  • “margin:0px;” becomes “margin:0;”;
  • s{margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px;} becomes a{margin:10px;};
  • “margin:010.0px;” becomes “margin:10px;”;
  • all unnecessary whitespace is removed, depending on the compression-level;
  • all background-properties are merged;
  • all comments are removed;
  • the last semicolon in every block can be removed;
  • missing semicolons are added, incorrect newlines in strings are fixed, missing units are added, bad colors (and color names) are fixed;
  • “property:value ! important;” becomes “property:value !important;”.

The CSSTidy compression ratio mostly depends on the level of whitespace-removal. Using standard whitespace-removal (which preserves the readability) the compression ratio often is 30% and more. In theory the compression ratio can be 99,99% but only very “stupid” stylesheets will allow those ratios. If a high compression is not important for you, you can also use CSSTidy to format or fix CSS code for a higher browser compatibility.

CSSTidy examples – before and after

Stylesheet before:

.DUMMY {
color: green;
	text-decoration: blink;
	font-weight: bold;
	eeky-eek: gimp rules;
}

/*
	Browser profile:
	clientScreenWidth		= 1280
	clientScreenHeight		= 1024
	clientScreenColorDepth		= 32
	browserWidth			= 1280
	browserHeight			= 836
*/

A:link { text-decoration:none; }
A:visited { text-decoration:none; }
A:link:active,:visited:active { text-decoration:none; }
A:link:hover,:visited:hover { text-decoration:underline; color:#0066FF; }

.mkt {margin: -15px 0 0 0;}
.clear { clear: left; }
.frame {position: absolute;}
.marquee { background: url(images/sfx1_bg.gif) bottom repeat-x; padding: 0; margin: 0;}
.marquee_l { background: url(images/sfx1_bga.gif) bottom left no-repeat; margin: auto 0; padding: 0 15px 10px 15px; }
.marquee_copy { margin: 0 0 10px 0; padding: 0;}
.marquee_copy h3 { font-size: 100%; margin: 0; padding: 0; }
.marquee_r { background: url(images/sfx1_bgb.gif) bottom no-repeat; width: 327px; text-align: center;}
.marquee_rb { background: url(images/sfx1_bgc.gif) bottom no-repeat;}
.marquee_rb ul {height: 28px; padding: 0; margin: 0; text-align: center;}
.marquee_rb li {position: relative; font-size: 85%; font-weight: bold; display: inline; list-style: none; background: url(images/sfx1_bullet.gif) 0 2px no-repeat; padding: 0 0 0 12px; margin: 0 10px 0 0;}

.marquee_stats { padding: 0 0 0 15px; font-size: 85%; }

.leftCol { margin: 0 351px 0 0; position: relative; }
.leftCol .title, .rightCol .title { border: 1px solid #CCD6EB; margin: 0; position: relative; padding: 3px; background: #fff; clear: left;}
.leftCol .title h3, .rightCol .title h3 { font-size: 100%; margin: 0; padding: 3px 0 3px 11px; background: #CCD6EB; }
html > body .leftCol .title h3 small {top: -1px; right: -31px;}
.leftCol .title h3 small { font-size: 10px; position: absolute; top: 0; right: 358px; margin: 0; height: 27px; padding: 5px 0 0 30px; background: url(images/sfx1_bgz.gif) top left no-repeat; width:63px; }

.leftCol .title_biz, .rightCol .title_biz { border: 1px solid #fc9; margin: 0; position: relative; padding: 3px; background: #fff; clear: left;}
.leftCol .title_biz h3, .rightCol .title_biz h3 { font-size: 100%; margin: 0; padding: 3px 0 3px 11px; background: #fc9; }
html > body .leftCol .title_biz h3 small {top: -1px; right: -31px;}
.leftCol .title_biz h3 small { font-size: 10px; position: absolute; top: 0; right: 353px; margin: 0; height: 27px; padding: 0 0 0 30px; background: url(images/sfx1_bgz.gif) top left no-repeat; width:63px; }

.leftCol .title a, .rightCol .title a { padding: 0 1px; border: 1px solid #c60; background: #f96; color:#fff; text-decoration: none; }
.leftCol .title a.new, .rightCol .title a.new { padding: 0 1px; border: 1px solid #060; background: #090; color:#fff; text-decoration: none; }
.leftCol p, .rightCol p, .rightCol form { margin: 15px; }

.column {padding: 0 0 0 15px; margin: 15px 0; list-style: none; float: left;}

.rightCol {width: 336px; margin: 0 0 0 15px; float:right;}
html > body .rightCol .title h3 small {top: -1px; right: -31px;}
.rightCol .title h3 small { font-size: 10px; position: absolute; top: 0; right: 0px; margin: 0; height: 27px; padding: 5px 0 0 30px; background: url(images/sfx1_bgz.gif) top left no-repeat; width:63px; }

.readmore {border-bottom: 1px solid #ddd; margin: 0 0 .5em 0; padding: .5em; text-align: center;}
.newsitem {margin: 15px;}

.ad6 {margin: 15px 0 1em 0;}

  BODY, P, DIV, TD, TH, TR, FORM, OL, UL, LI, INPUT, TEXTAREA, SELECT {font-family: Arial, Verdana, Geneva, sans-serif; font-size: small; }
  B {font-family: arial,verdana,helvetica,sans-serif; font-size: small; }
  PRE,TT { font-family: courier,sans-serif; font-size: small; }

  .smfc0n {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #000000;}
  .smfc0b {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #000000; background-color: #FFFFFF;}
  .smfc1n {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #FFFFFF;}
  .smfc1b {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #FFFFFF;}

  .mdfc0n {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #000000;}
  .mdfc0b {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #000000;}
  .mdfc1n {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #FFFFFF;}
  .mdfc1b {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #FFFFFF;}
  .mdfc3b {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #CC0033;}
  .mdfc4b {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #333399;}
  .mdfc2b {font-family: arial,verdana,helvetica,sans-serif; font-size: small;  color: #8e8e8e;}
  .lgfc0n {font-family: arial,verdana,helvetica,sans-serif; font-size: medium; color: #000000;}
  .lgfc0b {font-family: arial,verdana,helvetica,sans-serif; font-size: medium; color: #000000;}
  .lgfc4b {font-family: arial,verdana,helvetica,sans-serif; font-size: medium; color: #0000CC;}
  .xlgfc1n {font-family: arial,verdana,helvetica,sans-serif; font-size: medium; color: #FFFFFF;}
  .xlgfc1b {font-family: arial,verdana,helvetica,sans-serif; font-size: medium; color: #FFFFFF;}
  .xlgfc1n {font-family: arial,verdana,helvetica,sans-serif; font-size: medium; color: #FFFFFF;}
  .xlgfc1b {font-family: arial,verdana,helvetica,sans-serif; font-size: medium; color: #FFFFFF;}
  .xlgfc2b {font-family: arial,verdana,helvetica,sans-serif; font-size: medium; color: #003399;}

  .osdn-search {font-size: small; font-family: arial, verdana, sans-serif;}
  .osdn-button {margin-top: 1px; margin-bottom: 1px;}
  select.osdn-search {text-align: center;}
  .osdn-navtext {color: #FFFFFF;font-family: arial, verdana, sans-serif;font-size: small;}
  .osdn-foottext {color: #666666; font-family: arial, verdana, sans-serif; font-size: small; text-align: center;}

And this stylesheet afterwards:

.DUMMY {
color:green;
text-decoration:blink;
font-weight:700;
eeky-eek:gimp rules;
}

A:link:hover,:visited:hover {
text-decoration:underline;
color:#06F;
}

.mkt {
margin:-15px 0 0;
}

.clear {
clear:left;
}

.frame {
position:absolute;
}

.marquee {
background:url(images/sfx1_bg.gif) bottom repeat-x;
margin:0;
padding:0;
}

.marquee_l {
background:url(images/sfx1_bga.gif) bottom left no-repeat;
margin:auto 0;
padding:0 15px 10px;
}

.marquee_copy {
margin:0 0 10px;
padding:0;
}

.marquee_copy h3 {
font-size:100%;
margin:0;
padding:0;
}

.marquee_r {
background:url(images/sfx1_bgb.gif) bottom no-repeat;
width:327px;
text-align:center;
}

.marquee_rb {
background:url(images/sfx1_bgc.gif) bottom no-repeat;
}

.marquee_rb ul {
height:28px;
text-align:center;
margin:0;
padding:0;
}

.marquee_rb li {
position:relative;
font-size:85%;
font-weight:700;
display:inline;
list-style:none;
background:url(images/sfx1_bullet.gif) 0 2px no-repeat;
margin:0 10px 0 0;
padding:0 0 0 12px;
}

.marquee_stats {
font-size:85%;
padding:0 0 0 15px;
}

.leftCol {
position:relative;
margin:0 351px 0 0;
}

.leftCol .title,.rightCol .title {
border:1px solid #CCD6EB;
position:relative;
background:#fff;
clear:left;
margin:0;
padding:3px;
}

.leftCol .title h3,.rightCol .title h3 {
font-size:100%;
background:#CCD6EB;
margin:0;
padding:3px 0 3px 11px;
}

.leftCol .title h3 small {
font-size:10px;
position:absolute;
top:0;
right:358px;
height:27px;
background:url(images/sfx1_bgz.gif) top left no-repeat;
width:63px;
margin:0;
padding:5px 0 0 30px;
}

.leftCol .title_biz,.rightCol .title_biz {
border:1px solid #fc9;
position:relative;
background:#fff;
clear:left;
margin:0;
padding:3px;
}

.leftCol .title_biz h3,.rightCol .title_biz h3 {
font-size:100%;
background:#fc9;
margin:0;
padding:3px 0 3px 11px;
}

.leftCol .title_biz h3 small {
font-size:10px;
position:absolute;
top:0;
right:353px;
height:27px;
background:url(images/sfx1_bgz.gif) top left no-repeat;
width:63px;
margin:0;
padding:0 0 0 30px;
}

.leftCol .title a,.rightCol .title a {
border:1px solid #c60;
background:#f96;
color:#fff;
text-decoration:none;
padding:0 1px;
}

.leftCol .title a.new,.rightCol .title a.new {
border:1px solid #060;
background:#090;
color:#fff;
text-decoration:none;
padding:0 1px;
}

.column {
list-style:none;
float:left;
margin:15px 0;
padding:0 0 0 15px;
}

.rightCol {
width:336px;
float:right;
margin:0 0 0 15px;
}

.rightCol .title h3 small {
font-size:10px;
position:absolute;
top:0;
right:0;
height:27px;
background:url(images/sfx1_bgz.gif) top left no-repeat;
width:63px;
margin:0;
padding:5px 0 0 30px;
}

.readmore {
border-bottom:1px solid #ddd;
text-align:center;
margin:0 0 .5em;
padding:.5em;
}

.ad6 {
margin:15px 0 1em;
}

BODY,P,DIV,TD,TH,TR,FORM,OL,UL,LI,INPUT,TEXTAREA,SELECT {
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:small;
}

B {
font-family:arial,verdana,helvetica,sans-serif;
font-size:small;
}

PRE,TT {
font-family:courier,sans-serif;
font-size:small;
}

.smfc0b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:small;
color:#000;
background-color:#FFF;
}

.mdfc3b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:small;
color:#C03;
}

.mdfc4b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:small;
color:#339;
}

.mdfc2b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:small;
color:#8e8e8e;
}

.lgfc4b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:medium;
color:#00C;
}

.xlgfc2b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:medium;
color:#039;
}

.osdn-search {
font-size:small;
font-family:arial, verdana, sans-serif;
}

.osdn-button {
margin-top:1px;
margin-bottom:1px;
}

select.osdn-search {
text-align:center;
}

.osdn-navtext {
color:#FFF;
font-family:arial, verdana, sans-serif;
font-size:small;
}

.osdn-foottext {
color:#666;
font-family:arial, verdana, sans-serif;
font-size:small;
text-align:center;
}

A:link,A:visited,A:link:active,:visited:active {
text-decoration:none;
}

html > body .leftCol .title h3 small,html > body .leftCol .title_biz h3 small,html > body .rightCol .title h3 small {
top:-1px;
right:-31px;
}

.leftCol p,.rightCol p,.rightCol form,.newsitem {
margin:15px;
}

.smfc0n,.mdfc0n,.mdfc0b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:small;
color:#000;
}

.smfc1n,.smfc1b,.mdfc1n,.mdfc1b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:small;
color:#FFF;
}

.lgfc0n,.lgfc0b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:medium;
color:#000;
}

.xlgfc1n,.xlgfc1b {
font-family:arial,verdana,helvetica,sans-serif;
font-size:medium;
color:#FFF;
}

Nice and clean!

www.csstidy.sourceforge.net

Online versions of the CSSTidy optimizer:
www.devilo.us (with CSS3 support).
www.csstidyonline.com