Developers have been dividing their code, creating 3 <ul>s and floating each left, followed by a clear, to better use screen real estate. CSS3 solves this issue with the ‘Multi-column Layout Module’. We can now maximize the use of a large screen real-estate, by including limited-width columns of text placed side by side. Well, at least we can in non-IE browsers. Here is a grid of the CSS3 Multi-column Layout Module, all the properties, values and current browser support. This site uses this module on some pages, such as the ARIA page.
| Property | Inherited/ Default | ie6 | ie7 | ie7comp | ie8 | FF 3.6 |
Saf 4 |
Chrome | OP 10 |
|---|---|---|---|---|---|---|---|---|---|
| Property | CSS3 | ie6 | ie7 | ie7comp | ie8 | FF3 | Saf | OP | |
| COLUMNS | |||||||||
column-count |
no | -moz- | -webkit | -webkit | |||||
| auto | default | -moz- | -webkit- | -webkit- | |||||
| (integer) | sandbox | -moz- | |||||||
column-fill |
no | ||||||||
| auto | sandbox | ||||||||
| balance | default | -moz- | -webkit | -webkit | |||||
column-gap – gap between columns |
no | -moz- | -webkit | -webkit | |||||
| normal | default | -moz- | -webkit | -webkit- | |||||
| (positive length) | sandbox | -moz- | |||||||
column-rule |
no | -moz- | -webkit | -webkit | |||||
| column width/style/color (see below) | sandbox | -moz- | -webkit- | -webkit- | |||||
column-rule-color |
no | -moz- | |||||||
| (rgb or #color) | -moz- | -webkit | -webkit | ||||||
| (rgba color) | sandbox | -moz- | -webkit- | -webkit- | |||||
column-rule-style |
no | -moz- | |||||||
| (see border style) | sandbox | -moz- | -webkit | -webkit | |||||
| none | -moz- | -webkit- | -webkit- | ||||||
column-rule-width |
no | -moz- | -webkit | -webkit- | |||||
| thin | medium | thick | sandbox | -moz- | -webkit | -webkit | |||||
| (length) | -moz- | -webkit- | -webkit- | ||||||
columns (shorthand) |
no | -moz- | -webkit | -webkit | |||||
| length for column-width and/or int for column-count | -moz- | -webkit- | -webkit- | ||||||
| omitted value set to initial value | initial values | -moz- | |||||||
column-span |
CSS3 | ||||||||
| 1 | default | ||||||||
| all | sandbox | ||||||||
column-width |
no | -moz- | -webkit | -webkit | |||||
| (length) | sandbox | -moz- | -webkit- | -webkit- | |||||
| auto | default | -moz- |
Note that the CSS3 specifications are still in draft mode. Note the -webkit- and -moz- in the cells. Until this is supported, code like this:
-moz-column-count:3; /* for mozilla */ -webkit-column-count:3; /* for webkit (Safari and Google) */ -o-column-count:3; /* for opera, likely, when supported */ column-count:3; /* for all and future proofing */
Until I have time to finish my explanations of each property and value, for some interesting perspective on what this support means, take a gander over at http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns
I do disagree with Zoe’s conclusion of not using columns. If you take a look at http://www.standardista.com/standards/wai-aria-accessible-rich-internet-applications-basics, the ARIA roles is in two columns. While i don’t care for the fact that menubar is split among columns, i do find the columned version much easier to read.
I liked the CSS compresor.
Just wanted to mention Opera supports all of these values since Opera 11.1