YUI Compressor

Jump to Table of Contents

This document describes how the CSS minification part of the YUICompressor works.

CSS minifications

This section describes the various ways that YUICompressor makes your CSS smaller.

Stripping comments and white space

YUICompressor strips all the comments and white space that are not required for the CSS to work.

Before the minification:

/*****
  Multi-line comment
  before a new class name
*****/
.classname {
    /* comment in declaration block */
    font-weight: normal;
}

After the minification:

.classname{font-weight:normal}

Special comments

Stripping comments is not always acceptable. Sometimes you need to retain copyright information. You can use ! at the beginning of the comment to mark the comment as special and it will be preserved.

Before:

/*!
  (c) Very Important Comment
*/
.classname {
    /* comment in declaration block */
    font-weight: normal;
}

After:

/*!
  (c) Very Important Comment
*/.classname{font-weight:normal}

The ! character itself is also preserved. This way you can safely double-minify the same file (probably by mistake). That also allows when reviewing the code (manually or with tools) to see ! and conclude that this comment is there intentionally, not because you forgot to minify the CSS.

Striping last semi-colon

The last semi-colon in a declaration block is not needed. You can keep it in your source for maintenance purposes and let the minifier take care of stripping it out before the site goes live.

Before:

.classname {
    border-top: 1px;
    border-bottom: 2px;
}

After:

.classname{border-top:1px;border-bottom:2px}

Extra semi-colons

Only one semi-colon is required to separate rules, so the minifier will strip an accidentally added one.

Before:

.classname {
    border-top: 1px; ;
    border-bottom: 2px;;;
}

After:

.classname{border-top:1px;border-bottom:2px}

No empty declarations

Empty declaration blocks don't contribute to the way the stylesheets work, so they can safely be removed.

Before:

.empty { ;}
.nonempty {border: 0;}

After:

.nonempty{border:0}

Zero values

When using zero values, the units of measure are not required, so the YUICompressor will strip them. Additionally, when you have two, three of four zeros in margins and paddings, they can be reduced to one.

Before:

a {
    margin: 0px 0pt 0em 0%;
    background-position: 0 0ex;
    padding: 0in 0cm 0mm 0pc
}

After:

a{margin:0;background-position:0 0;padding:0}

Floats

When a value is using a floating point number smaller than 1, the leading 0 is not required.

Before:

.classname {
    margin: 0.6px 0.333pt 1.2em 8.8cm;
}

After:

.classname{margin:.6px .333pt 1.2em 8.8cm}

Colors values

RGB color values are easier to read, but the hex values are shorter, so YUICompressor will use the more concise form. Additionally, colors that follow the pattern #AABBCC can be reduced to #ABC, except when used in IE filter values.

Before:

.color-me {
    color: rgb(123, 123, 123);
    border-color: #ffeedd;
    background: none repeat scroll 0 0 rgb(255, 0,0);
}

After:

.color-me{color:#7b7b7b;border-color:#fed;background:none repeat scroll 0 0 #f00}

Before:

.cantouch {
    color: rgba(1, 2, 3, 4);
    filter: chroma(color="#FFFFFF");
}

After (no color minification):

.cantouch{color:rgba(1,2,3,4);filter:chroma(color="#FFFFFF")}

Single charsets

Only one charset declaration is allowed per stylesheet, but sometimes when automatically merging stylesheets into one to reduce HTTP requests, you may end up with more than one charset. YUICompressor will keep only the first.

Before:

@charset "utf-8";
#foo {
    border-width: 1px;
}
 
/* second css, merged */
@charset "another one";
#bar {
    border-width: 10px;
}

After:

@charset "utf-8";#foo{border-width:1px}#bar{border-width:10px}

Alpha opacity

The opacity filter in IE has a verbose syntax, which can be shortened using the IE4 syntax

Before:

.classname {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);       /* IE < 8 */
}

After:

.classname{-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80)}

Shorter none values

For some properties none and 0 have the same meaning. Instances of "none" are converted to 0 where applicable and safe to do so.

Before:

.classname {
    border: none;
    background: none;
    outline: none;
}

After:

.classname{border:0;background:0;outline:0}

CSS hacks tolerance

When stripping comments and performing other minification tasks, the YUICompressor keeps an eye on preserving common CSS hacks. CSS hacks often use parsing glitches in browsers to provide some extra declarations (or hide some) from specific browser versions.

This section describes the hacks that are tolerated by the YUICompressor.

Underscore/star hack

Using _ and * to prefix CSS properties is a simple way to target IE6 and IE7.

Since YUICompressor uses a regular expression based CSS minifier and doesn't validate CSS properties, it can accept pretty much any property. Therefore this hack is preserved.

Before:

#element {
    width: 1px;
    *width: 2px;
    _width: 3px;
}

After:

#element{width:1px;*width:3pt;_width:2em}

Child selector hack

The child selector hack allows developers to hide declarations from IE7 and below using an empty comment.

YUICompressor strips comments but will make an exception and retain empty comments that immediately follow the &gt; character.

Before:

html >/**/ body p {
    color: blue;
}

After:

html>/**/body p{color:blue}

IE5/Mac hack

There is a hack that targets IE5/Mac using a bug when parsing comments.

YUICompressor retains comments that look like they are using this hack, but it minifies the comments needed by the hack.

Before:

/* Ignore the next rule in IE mac \*/
.selector {
    color: khaki;
}
/* Stop ignoring in IE mac */

After:

/*\*/.selector{color:khaki}/**/

Box model hack

This hack uses valid CSS and there's no special use of comments so it's retained.

Before:

#elem {
    width: 100px; /* IE */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 200px; /* others */
}
html>body #elem {
    width: 200px; /* others */
}

After:

#elem{width:100px;voice-family:"\"}\"";voice-family:inherit;width:200px}html>body #elem{width:200px}

Running and contributing tests

When reporting bugs, it's greatly appreciated if you can provide a test case. In order to create a test you can use your version of the compressor or build it from source.

  1. Checkout or download the code from http://github.com/yui/yuicompressor/. You need the code even if you don't intend to build the tool yourself, because that's where the tests and the test runner are.
  2. Navigate to the root yuicompressor/ directory
  3. Type ant and hit enter

In order for this to work you need a recent Java SDK installed (at least 1.4) and also Ant running. (On the Mac, you can simply do port install apache-ant to get Ant)

There are a number of tests in the tests/ directory, you can run them with the suite script:

cd tests/
./suite.sh

This command will also run the tests using the JavaScript port of the minifier. Since the compressor is using Mozilla's Rhino (slightly modified), Rhino is part of the code. So it can be used as a JavaScript interpreter to run the JavaScript port.

The procedure to write new tests is as follows:

  1. Create source CSS file in the tests/ directory, e.g. new-test.css
  2. Create a new file with the expected result and name it with a .min extension, e.g. new-test.css.min

JavaScript port

The YUICompressor is written in Java, however there's a JavaScript port of the CSS minification part, which is available separately.

There is a Node.js module for cssmin using the JavaScript port of our minifier. It can be installed with: 

$ npm install cssmin