Columns
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.
Last major update on 17 February 2013.
|
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.
AlternativeUses WebKit syntax
|
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;
AlternativeUses 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.
|
|
|
Yes |
Yes |
Yes |
Yes |
No |
Yes |
Yes |
No |
-moz- |
-prefix-column-count: 4;
|
|
|
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.
|
|
|
Yes |
Yes |
Yes |
Yes |
No |
Yes |
Yes |
No |
-prefix-column-gap: 5em;
|
|
|
Yes |
Yes |
Yes |
Yes |
No |
Yes |
No |
Yes |
Yes |
No |
Yes |
-prefix-column-rule: 5px double red;
|
|
|
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.
|
|
|
Yes |
Yes |
Yes |
Yes |
No |
Yes |
Yes |
No |
-moz- |
-prefix-column-width: 10em;
|
Tested browsers
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