In this post, I will walk through the new columns specification that arrived in CSS 3. I will show you the current implementation state of columns in the four major rendering engines: Gecko (Firefox), Webkit (Safari & Chrome), Trident (Internet Explorer), and Presto (Opera).
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
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
| Property | Gecko | Webkit | Trident | Presto |
| column-count | -moz-column-count | -webkit-column-count | ✗ | ✗ |
| column-width | -moz-column-width | -webkit-column-width | ✗ | ✗ |
| columns | ✗ | -webkit-columns | ✗ | ✗ |
| column-gap | -moz-column-gap | -webkit-column-gap | ✗ | ✗ |
| column-rule-color | -moz-column-rule-color | -webkit-column-rule-color | ✗ | ✗ |
| column-rule-style | -moz-column-rule-style | -webkit-column-rule-style | ✗ | ✗ |
| column-rule-width | -moz-column-rule-width | -webkit-column-rule-width | ✗ | ✗ |
| column-rule | -moz-column-rule | column-rule | ✗ | ✗ |
| column-span | ✗ | ✗ | ✗ | ✗ |
| column-fill | ✗ | ✗ | ✗ | ✗ |
| break-before | ✗ | ✗ | ✗ | ✗ |
| break-inside | ✗ | ✗ | ✗ | ✗ |
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:
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:
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:
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. 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. Value: 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. Value: column-rule-width && column-rule-style & & column-rule-color Shorthand for setting all three column-rule properties. Value: 1 | all 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. Value: auto | 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.column-rule-style
column-rule-width
Initial value: mediumcolumn-rule
column-span
Initial value: 1column-fill
Initial value: balance