This week I was working on a prototype layout for one of our internal tools and I decided to try out the CSS3 multi-column layout module.
Currently only Mozilla and Webkit support multi-column styles, but since this is an internal tool I have a greater degree of fredom in adopting graceful degradation and progressive enhancement.
What I found out is that Firefox and Webkit have implementes the ambiguous parts of the standard very differently, resulting in some weird behaviour. A simple 4 column layout results in inconsistent UIs depending on your browser of choice.
Firefox
Mozilla’s implementation seems to have no quirks and results in a layout exactly as I’d expect:
- The columns line up at the top and bottom
- The bottom padding is consistent
- Blocks with # of elements < # of columns layout properly.
Safari
Safari’s implementation is not quite there as the spacing seems to vary widly:
- The columns routinely don’t line-up
- The bottom padding is never consistent
- Affected by padding being split across columns
- Blocks with # of elements < # of columns don’t show up in the proper columns
- If only one element is present is shows up in the second column
- Two elements show up in column 1 & 3
Chrome
Chrome, which uses the same Webkit engine as Safari, has even worse results. I suspect they’re using an older version of Webkit:
Given that this is Webkit it exibits many of the same behaviours as Safari, with one exception:
- Sometimes results in elements being rendered above the column border
Conclusion
CSS3 multi-column layout is not consistent enough between Firefox and Webkit-based browsers to make the cut for graceful degradation. If your design calls for multiple columns you’re better off using a CSS framework like: