CSS units and values

Back to the index.

CSS3 Unit and Values spec.

The contents of my CSS pages and browser compatibility.

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

Last major update on 15 March 2013.

Font-dependent units

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 18 25 Mini Mob 12 Mob 14 6 7 PB Xpress MeeGo Anna Belle 9 10
ch unit
Width of the character “0” in the current font. 		No No No No No Yes No No Yes

I accept any value that seems halfway decent.
em unit
Equal to the font size in pixels 		Yes Beware! Yes Yes Yes Yes Yes Beware Yes Yes
  • Opera Mini doesn’t actually show the fonts in the required size, although the em test elements have the correct width.

OK, Android is so outrageously bad that the use of ems is counter-indicated in all cases:

  • My LG (2.2), Sony (2.3.7), and Samsung (4.0.3) Androids work properly. An em is equal to the font size in pixels.
  • The others do not make the em larger than a rem in any circumstance. Worse, rems are buggy as hell, too.
  • The One browser does the same. However, it has different values than the Android 4 browser on the same phone, so I don’t think it uses WebView. It genuinely has created the same bug by independent means.
ex unit
Width of the “x” character OR equal to half an em 		Yes Yes Yes Yes Yes Yes Yes Yes

I accept any value that seems halfway decent.
rem unit
Equal to the font size of the HTML element 		Yes Beware! Yes No Yes Yes Yes Yes Beware Yes Yes

OK, Android is so outrageously bad that the use of rems is counter-indicated in all cases:

  • My LG (2.2) and Samsung (4.0.3) Androids work properly. A rem is equal to the root font size (i.e. the font size of the HTML element) and the default is 16px.
  • My Sony (2.3.7) uses a default of 14px, but changes correctly with the root font size.
  • The others seem to have picked a random value for a rem and only occasionally change it with the root font size.
  • One has a maximum rem size of 17.5px.
Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 18 25 Mini Mob 12 Mob 14 6 7 PB Xpress MeeGo Anna Belle 9 10

Absolute units

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 18 25 Mini Mob 12 Mob 14 6 7 PB Xpress MeeGo Anna Belle 9 10
cm unit
1 in = 2.54 cm 		Yes Yes Yes Yes Yes Yes Yes Yes
in unit
1 in = 96 px 		Yes Yes Yes Yes Yes Yes Yes Yes
mm unit
10 mm = 1 cm 		Yes Yes Yes Yes Yes Yes Yes Yes
pc unit
1 pc = 12 pt 		Yes Yes Yes Yes Yes Yes Yes Yes
pt unit
1 in = 72 pt 		Yes Yes Yes Yes Yes Yes Yes Yes
px unit
ROOT UNIT 		Yes Yes Yes Yes Yes Yes Yes Yes

Viewport units

These units allow you to size elements relative to the viewport. But to WHICH viewport? I think the spec says layout viewport.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 18 25 Mini Mob 12 Mob 14 6 7 PB Xpress MeeGo Anna Belle 9 10
vh and vw units
Percentages of the layout viewport width or height
50vw = 50% of viewport width 		No Static No No vv & static No Buggy No No No vv No vv & static Static Yes No
vv
Unit relative to the visual viewport, not to the layout viewport.
Static
Widths not updated when the viewport changes, for instance by changing the orientation
  • Opera 14: weird numbers that bear no discernible relation to any viewport.
vmin unit
The smaller of vw and vh 		No Yes No No Yes No Yes No No No Yes No Yes No Yes No

Values

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 18 25 Mini Mob 12 Mob 14 6 7 PB Xpress MeeGo Anna Belle 9 10
calc()
To perform calculations in CSS 		No Alt No No Alt No Alt No Alt Alt No No Alt No Alt Yes
Alt
Requires prefix

Not supported

The following units and values are supported in a desktop browser but not in a mobile browser:

Tested browsers

Mobile browser test array 1.0.4; 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 18
WebKit 535
On Nexus 7, Android 4.2.1
Chrome 25
WebKit 537
On Samsung Galaxy Note I, Android 4.0.3
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
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 534
Default browser on Nintendo Wii U
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 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:

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