CSS3 Columns & Browser Support

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 */
This entry was posted in CSS (including hacks). Bookmark the permalink.

One Response to CSS3 Columns & Browser Support

  1. Tyler says:

    Thanks. This helped out tremendously. By the way, I believe Opera 11.10+ supports multi-column layouts. The vendor prefix is not necessary.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>