CSS3 Columns & Browser Support

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
Chrome OP
Property CSS3 ie6 ie7 ie7comp ie8 FF3 Saf   OP
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 */

4 thoughts on “CSS3 Columns & Browser Support”

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *