I am busy working away at a grid of all the CSS3 properties. But, as I test them, I figure I would share. Here is the first set: the column properties.
I have a grid of all of the CSS3 properties, values and browser support that you may want to check out as well.
Property | Inherited? | Default Value | ie6 | ie7 | ie7comp | ie8 | FF 3.6 |
Saf 4 |
Chrome | OP 10 |
Notes |
---|---|---|---|---|---|---|---|---|---|---|---|
Property | CSS 2.1 | Default Value | 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 */
Thanks. This helped out tremendously. By the way, I believe Opera 11.10+ supports multi-column layouts. The vendor prefix is not necessary.