Columns

Back to the index.

CSS3 multicolumn specification.

This module serves to split up an element into multiple columns, and to give further instructions about a few details.

This is the mobile table. See also the desktop table.

All WebKit-based browsers need the -webkit- prefix. All Gecko-based browsers need -moz-. So use those prefixes.

I'm writing a CSS book.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
break-before: column
Making sure a column breaks occurs just before or after an element 		wk No wk wk Yes wk wk No wk No wk No 
-webkit-column-break-before: always;
break-before: column;

Note the different keywords in the standards-based an the WebKit syntax. Use after instead of before if you need it.

wk
Uses WebKit syntax
break-inside: avoid (columns)
Avoid column breaks within an element

Secondary test page: my CSS main page, where I use columns for the index. Individual entries should not be broken over two columns. 		A+B No A+B Yes No A+B No A+B A+B No No 
-webkit-column-break-inside: avoid;
break-inside: avoid;
Alternative
Uses WebKit syntax
Buggy
Most WebKit-based browsers now break the paragraph at the last line instead of two lines earlier. Although this is allowed according to the spec (you should try to avoid breaks), I don’t see the point here, since the new effect is worse than the original.
A+B
Alternative and buggy.

Last major update on 17 February 2013.

Selector iOS Android Chr Opera BlackBerry Nokia Dolphin One Tizen NetFront UC IE9 Firefox
5 6 2 3 4 Mini Mobile 6 7 PB 10 Symbian 9.2 S40 Symbian Anna Xpress MeeGo
break-before: column
Making sure a column breaks occurs just before or after an element 		Alternative No Alternative Yes Alternative No Alternative Alternative No Alternative No 
-webkit-column-break-before: always;
break-before: column;

Note the different keywords in the standards-based an the WebKit syntax. Use after instead of before if you need it.

Alternative
Uses WebKit syntax
break-inside: avoid (columns)
Avoid column breaks within an element

Secondary test page: my CSS main page, where I use columns for the index. Individual entries should not be broken over two columns. 		A+B No A+B Yes No A+B No A+B No A+B No No 
-webkit-column-break-inside: avoid;
break-inside: avoid;
Alternative
Uses WebKit syntax
Buggy
Most WebKit-based browsers now break the paragraph at the last line instead of two lines earlier. Although this is allowed according to the spec (you should try to avoid breaks), I don’t see the point here, since the new effect is worse than the original.
A+B
Alternative and buggy.
column-count
 Yes Yes Yes Yes No Yes Yes No -moz- 
-prefix-column-count: 4;
column-fill
 No No Yes No No No No No 
column-fill: auto;

By default, columns should be balanced if the height is too large (balance keyword). The auto keyword tells the browser to fill the height entirely and leave gaps at the end of the last column, if necessary.
column-gap
 Yes Yes Yes Yes No Yes Yes No 
-prefix-column-gap: 5em;
column-rule
 Yes Yes Yes Yes No Yes No Yes Yes No Yes 
-prefix-column-rule: 5px double red;
column-span
 Yes No No Yes Sometimes No Yes Yes No No Yes No Yes No 
-prefix-column-span: all;
  • The Samsung Android 4 supports it; the HTC does not.

This is the most insane compatibility pattern I’ve ever seen. I hoped that support could be tied to specific WebKit versions, but it can’t. 535+ never support it, but 534 most of the time (HTC Android 4, Dolphin and One do not support it, rest does), and 533 doesn’t most of the time (UC does).

I have no fucking clue what’s going on.
column-width
 Yes Yes Yes Yes No Yes Yes No -moz- 
-prefix-column-width: 10em;
Selector iOS Android Chr Opera BlackBerry Nokia Dolphin One Tizen NetFront UC IE9 Firefox
5 6 2 3 4 Mini Mobile 6 7 PB 10 Symbian 9.2 S40 Symbian Anna Xpress MeeGo

Tested browsers

Mobile browser test array 1.0; February 2013

All these browsers are WebKit-based, with the exception of both Operas (still Presto), IE9 (Trident), and Firefox and Nokia Xpress (Gecko).

Opera Mini and Nokia Xpress are proxy browsers.

iOS 5
Default browser on iPad 2 with iOS 5.1.1 (WebKit 534)
iOS 6
Default browser on iPhone 4S with iOS 6.1.1 (WebKit 536)
Android 2
Default browser on HTC Legend, Android 2.2 (WebKit 533)
Default browser on LG Optimus something, Android 2.2 (WebKit 533)
Default browser on Sony Xperia S, Android 2.3.7 (WebKit 533)
Android 3
Default browser on Packard Bell tablet, Android 3.2.1 (WebKit 534)
Android 4
Default browser on HTC One X, Android 4.1.1 (WebKit 534)
Default browser on Samsung Galaxy Note I, Android 4.0.3 (WebKit 534)
Chrome
Chrome 18 on Samsung Galaxy Note I, Android 4.0.3, HTC One X, Android 4.1.1, and Nexus 7, Android 4.2.1 (WebKit 535)
Opera Mini
7.5 on Samsung Galaxy Note I, Android 4.0.3
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia E71 (SymbianOS/9.2)
7.0.5 on iPad 2, iOS 5.1.1
Opera Mobile
12.10 on HTC One X, Android 4.1.1
12.00 on Nokia E7 (Symbian Anna)
BlackBerry 6
Default browser on BB Torch 9800 (OS6) (WebKit 534)
BlackBerry 7
Default browser on BB Torch 9810 (OS7) (WebKit 534)
BlackBerry PB
Default browser on PlayBook with OS 2.1.0 (WebKit 536)
BlackBerry 10
Default browser on Dev Alpha A device with OS 10.0.9 (WebKit 537)
Symbian 9.2
Default browser on Nokia E71 SymbianOS/9.2 (WebKit 413)
S40
Default browser on Nokia X3-02, S40 (WebKit 420)
Symbian Anna
Default browser on Nokia E7 Symbian Anna (WebKit 533)
Xpress
This is Nokia’s Gecko-based proxy browser. I’m testing Xpress 1.0.12 on the Lumia 800 (Windows Phone 7), but it seems this is also the browser users of modern S40s such as the Asha range get. This browser used to be called Ovi.
MeeGo
Default browser on Nokia N950, MeeGo Harmattan 1.2 (WebKit 534)
Dolphin
Independent full browser for Android.
Dolphin Beta 1.3.1 on Samsung Galaxy Note I, Android 4.0.3 (WebKit 534). Note: the non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
One
Formerly QQ browser by the Chinese company TenCent. Domestic competitor of UC.
3.5.2 on HTC One X, Android 4.1.1 (WebKit 534)
Tizen
Default browser on Lunchbox prototype by Intel, Tizen 2.0.0a3. (WebKit 537)
NetFront
NetFront, from the Japanese Access company, used to be big on proprietary Samsung and Sony Ericsson systems. It is now switching to WebKit from their own rendering engine. This is NetFront Life 2.3.1 on Sony Xperia S, Android 2.3.7 (WebKit 530)
UC
The largest Chinese browser (though I’m testing the full variant, not the proxy). UC 8.6.1 on Packard Bell tablet, Android 3.2.1. (WebKit 533)
IE9
Default browser on Nokia Lumia 800, Windows Phone 7.
Firefox
18 on HTC One X, Android 4.1.1

General note on One, NetFront, and UC: the browsers I test are not particularly representative for the actual browsers that are used in the wild. Though some may be default browsers on Asian Android devices, most of them get their market share from being pre-installed on feature phones. These installs are unlikely to use the same rendering engine I’m testing. This is the best I can do, though — and all these browser vendors definitely want to expand their market via Android.

Browsers by WebKit version

413
Symbian 9.2
420
S40
530
NetFront
533
Android 2
Symbian Anna
UC
534
iOS5
Android 3 and 4
BlackBerry 6 and 7
MeeGo
Dolphin
One
535
Chrome
536
iOS6
BlackBerry PlayBook
537
BlackBerry 10
Tizen