Before we get on to platform-specific issues and workarounds, though, we’ll look at the various CSS properties available for working with columns.

For more in-depth information on columns, you should check out the W3C working draft and Mozilla’s MDC page on columns. The Webkit blog also has an article, but it’s not particularly informative.

Contents

• Browser capabilities
• Browser bugs
  • Gecko
  • Webkit
• Properties
  • column-count
  • column-width
  • columns
  • column-gap
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-rule
  • column-span
  • column-fill

I will add more to this entry as I discover more about columns — the goal is to make it an easy-to-understand reference.

Browser capabilities

Browsers used for testing: Firefox 3.5.4 (Windows), Safari 4.0.2 (Windows), Internet Explorer 8.0.6001, Opera 10.00 (Windows)

Please let me know if this table is inaccurate, and I will update it.

Browser bugs

These are the bugs that I have encountered using CSS columns — if you know of more, please let me know, and I’ll add them to these lists.

Gecko bugs

• Specifying an “overflow” (or “overflow-x” or “overflow-y”) property on an element with columns prevents the column rule from being rendered at all.
• Column rules occasionally don’t render, regardless of the “overflow” property.
• There is no way to break columns.

Webkit bugs

• Pixel creep: Pixels from a later column can creep back to the bottom of the previous column. This can happen with plain text, but it is much more noticeable when you use a non-layout altering effect like text-shadow or box-shadow.
• Text that overflows the column horizontally is chopped off
• There is no way to break columns.

Properties

column-count

Value: | auto
Initial value: auto

If you don’t set the column-width property, column-count specifies the number of columns into which the content should be flowed.

If you specify column-width, column-count imposes a limit on the maximum number of columns to be rendered if you supply a numeric value.

column-width

Value: | auto
Initial value: auto

This property indicates the optimal column width — columns may be rendered narrower or wider by the UA, according to the available space.

If column-width has the value “auto”, then the width of the columns is determined by other means (for example, column-count).

columns

Value: column-width && column-count

The columns property is a short-hand property, used to set both column-width and column-count simultaneously.

column-gap

Value: | normal
Initial value: normal

Use column-gap to specify the size of the gutter that lies between columns. Most UAs will render “normal” as 1em.

column-rule-color

Value:

When a column-rule is specified, you may use column-rule-color to set the colour for the line drawn between columns. This property is approximately equivalent to the various border-(?)-color properties.

column-rule-style

Value:

By using column-rule-style, you may determine how the line between columns is to be rendered, if at all. Similar to border-(?)-style.

column-rule-width

Value:
Initial value: medium

column-rule-width sets the width of the line rendered in the gutter between columns. Basically, it’s the same as the border-(?)-width properties.

column-rule

Value: column-rule-width && column-rule-style & & column-rule-color

Shorthand for setting all three column-rule properties.

column-span

Value: 1 | all
Initial value: 1

By using column-span, you can allow an element to span either the entire set of columns, or none at all.

Note that you cannot set an arbitrary number of columns to span — this property essentially ‘interrupts’ the column flow and restarts it below the spanned element.

column-fill

Value: auto | balance
Initial value: balance

If you have set a height for your columnified element, setting column-fill to ‘auto’ will cause the columns to be ‘filled’ in turn, rather than have the content balanced equally between them.

There are quite a few CSS minifiers out there, which can bring the raw size of your CSS files down substantially. Very few of them, however, will also optimise your CSS for gzip compression. To that end, I’ve written a small Java application that will read in a CSS file and output its contents to stdout or another file in a format that’s optimised for gzipping.

The problem

A file will be most compressed when there are many recurring strings in the file. This means that when writing CSS files, this code:

.pony {
border: solid red 1px;
font-weight: bold;
}
.lemur {
border: solid red 1px;
font-weight: normal;
}

will be better-compressed than this:

.pony {
border: solid red 1px;
font-weight: bold;
}
.lemur {
font-weight: normal;
border: red solid 1px;
}

What it does

Specifically, my CSS minifier will perform the following transformations on the file:

• All comments are removed.
• The properties within all selectors are ordered alphabetically.
• The values for all properties are ordered alphabetically.
• All unnecessary whitespace is removed.

By way of example, the following CSS snippet:

body {
padding: 8px;
margin: 0;
background-color: blue;
color: white;
font-family: "Trebuchet MS", sans-serif;
}

h1 {
margin: 0;
padding: 0;
font-size: 200%;
color: #0F0;
font-weight: bold;
}

p {
margin: 0 0 2em;
line-height: 2em;
}

would be formatted to:

body{background-color:blue;color:white;font-family:"Trebuchet MS",sans-serif;margin:0;padding:8px;}h1{color:#0F0;font-size:200%;font-weight:bold;margin:0;padding:0;}p{line-height:2em;margin:0 0 2em;}

Compression results

A (very) large real-world CSS file of 78.2KB has a minified size of 63.7KB, which is a size decrease of nearly 20%. GZipping these two files, the un-minified file is reduced to 13.2KB, whilst the minified file weighs in at just 11.5KB — nearly 13% smaller.

Clearly, removing unnecessary whitespace and reordering the contents of the CSS selectors can greatly improve the compression of your CSS files, and thus make your pages deliver more quickly.

Comparison with YUI CSS Compression

As you can see in the chart below, the YUI compressor manages to make the original file around 1KB smaller than my minifier. However, when the two minified files are gzipped, my compression results in a file that is 11.5KB in size, whilst YUI only reduces down to 11.8KB.

Download

The source for this applet is available freely, and is a single Java file. It’s not particularly pretty, because I knocked this together in about half an hour.
Download
License: Mozilla Public License (In other words, do whatever you like with it. Credit is greatly appreciated, but not required.

Usage

First, if you haven’t done so yet, compile the code:

# javac CSSMin.java

Then, you can call the minifier by running

# java CSSMin in.css [out.css]

If you do not specify an output file, the resultant CSS will be printed to stdout (and can then be redirected as you wish).

Contact

If you have any questions or comments about this app, or if you find a bug or some weird behaviour, just comment on this post, and I’ll see what I can do.

If you find this utility useful, let me know! If you want to extend it, you’re free to do whatever you like with it, as it’s under the MPL. It would be nice, though, if you dropped me a line to let me know what you’re doing with it.

Future work

• Replace “0[px,em,%,etc]” with “0″.
• Replace “0 [0 [0 [0]]]” with “0″.
• Replace “0.6″ with “.6″ wherever possible.
• Replace all “rgb(64, 64, 64)” with “#404040″.
• Shorten colours from #112233 to #123 wherever possible.
• Remove all empty rules.
• Ordering of property valus according to the CSS spec, not just alphabetically.
• A cleaner interface, including the ability to stream and process from stdin.