CSS User Interface

Back to the index.

CSS3 User Interface

The CSS User Interface module is kind-of a Miscellaneous module, where stuff that couldn’t be treated in any other module is gathered.

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

The User interface spec contains several selectors, which are treated in the selectors section.

Last major update on 9 March 2013.

I'm writing a CSS book.

Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
box-sizing
 Yes Alt Yes Yes Alt Yes Alt Yes Alt Yes Yes Alt Yes Yes Alt
Alt
Needs prefix

In theory the default box-sizing is content-box. In practice it’s border-box for buttons and selects, and in IE and Firefox for tables (though not for trs, tds, and so on.) See the second test.
content
for :before/:after 		Yes Almost Yes Yes Almost Yes Yes Almost Yes Yes Almost Yes Yes
Almost
Browser does not support none.
invert value for outline
Accessibility feature. Makes sure the outline always has good contrast with the background. 		No No No Yes No No Yes No No Yes No
outline
A sort of border, but it doesn’t count for the box model. 		Yes Yes No Yes Yes Yes Yes Yes
outline-offset
To draw the outline away from the border 		Yes Yes No Yes Yes Yes Yes No Yes
resize
Allow the user to resize an element. 		No No No No No No No Sort of

To my surprise Firefox supports it. It’s also a showcase of why the interface doesn’t work on touchscreens.
text-overflow
Shows ellipsis characters when a text flows outside its box. 		Almost Almost Minmal No Almost Almost No Almost Almost Almost Yes

This property only makes sense when a box has white-space: nowrap and an overflow other than visible.

  • The string value is only supported by Firefox.
  • When the element has overflow: auto and you scroll it, IE and the WebKit-based browsers incorrectly treat the ellipsis as characters that scroll with the rest of the text. Firefox shows the actual text, while the ellipsis remains in place at the end of the line.
  • Opera Mini supports it only on iOS.
Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10

Not supported

The following declarations are supported on some desktop browsers, but on no mobile browser:

Tested browsers

Mobile browser test array 1.0.3; March 2013

iOS 5
WebKit 534
Default browser on iPad 2 with iOS 5.1.1
iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.1
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on LG Optimus something, Android 2.2
Default browser on Sony Xperia S, Android 2.3.7
Android 3
WebKit 534
Default browser on Packard Bell tablet, Android 3.2.1
Android 4
WebKit 534
Default browser on HTC One X, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.0.3
Chrome
WebKit 535
18 on Nexus 7, Android 4.2.1
Opera Mini
Presto
Proxy browser
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
Presto
12.10 on HTC One X, Android 4.1.1
12.00 on Nokia E7, Symbian Anna
Opera Mobile 14
WebKit 537
14.0 on Sony Xperia S, Android 2.3.7
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry PB
WebKit 536
Default browser on PlayBook with OS 2.1.0
BlackBerry 10
WebKit 537
Default browser on Dev Alpha A device with OS 10.0.9
Xpress
Gecko
Proxy browser
2.3 on the Nokia Asha 311, S40.
This browser used to be called Ovi. Nokia developed it because it saw how succesful Opera was on Nokia’s own devices.
MeeGo
WebKit 534
Default browser on Nokia N950, MeeGo Harmattan 1.2
Originally slated as Symbian’s successor, MeeGo was ousted in favour of Windows Phone. Some devices were sold, however, and a Finnish company is trying to re-start MeeGo under the name Sailfish. And who knows? Ex-Nokia people have good operator contacts.
Anna
WebKit 533
Default browser on Nokia E7, Symbian Anna
The next-to-last Symbian build. I don’t think it was the prime Symbian build for long; it was replaced by Belle fairly soon. But it’ll be in some people’s pockets.
Belle
WebKit 535
Default browser on Nokia PureView 808, Symbian Belle SP2
The most recent Symbian build.
UC
WebKit 533
UC 8.6.1 on Packard Bell tablet, Android 3.2.1.
The largest Chinese browser. I’m testing the full variant, not the proxy.
NetFront
WebKit 530
NetFront Life 2.3.1 on Sony Xperia S, Android 2.3.7
NetFront, by 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, and to the gaming device and TV markets.
Dolphin
WebKit 534
Beta 1.3.1 on Samsung Galaxy Note I, Android 4.0.3.
Independent full browser for Android. The non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
One
WebKit 534
3.5.2 on HTC One X, Android 4.1.1
Formerly QQ browser by the Chinese company TenCent. Domestic competitor of UC.
Tizen
WebKit 537
Default browser on Lunchbox prototype by Intel, Tizen 2.0.0a3
Tizen is an OS jointly being developed by Samsung and Intel. I expect Samsung to start producing devices this year, and it will get a few percent of market share.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.
Firefox
Gecko
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 or game consoles.I’m working on getting more representative test devices.

Browsers by WebKit version:

530
NetFront
533
Android 2
Anna
UC
534
iOS5
Android 3 and 4
BlackBerry 6 and 7
MeeGo
Dolphin
One
535
Chrome
Belle
536
iOS6
BlackBerry PlayBook
537
Opera Mobile 14
BlackBerry 10
Tizen