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.