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