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.

I'm writing a CSS book.

Font-dependent units

iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Puf LG Cy HTC Sa Xia Ub Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
ch unit
Width of the character “0” in the current font. 		Yes No Yes

I accept any value that seems halfway decent.
em unit
Equal to the font size in pixels 		Yes Buggy Yes Buggy 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:

  • 4.0.3 and lower work properly. An em is equal to the font size in pixels.
  • From 4.1 on there’s some serious bugginess. I’m not sure what they are doing, but an em is essentially a random number that may not be larger than the actual width of the container. On the other hand, it may.
ex unit
Width of the “x” character OR equal to half an em 		Yes Yes Yes

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

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

  • 4.0.3 and lower work properly. A rem is equal to the root font size in pixels.
  • From 4.1 on there’s some serious bugginess. I’m not sure what they are doing, but switching from a 16px to a 20px root font makes rems go smaller, to 14.6-15.5 pixels. Of course it ought to be 20px.
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Puf LG Cy HTC Sa Xia Ub Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS

Absolute units

iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Puf LG Cy HTC Sa Xia Ub Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
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.

iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Puf LG Cy HTC Sa Xia Ub Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
vh and vw units
Percentages of the layout viewport width or height
50vw = 50% of viewport width
Same without template
Font size test Block test Do not use vh in Safari 		Buggy 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
  • Safari 7 (browser and WebView): relative to the HTML document, whose height is not necessarily the layout viewport height.
  • Safari 8 (browser and WebView) doesn’t do this, but I don’t know where it gets its value from: the height is about 200px more than it should be.
  • Opera 14: weird numbers that bear no discernible relation to any viewport.
vmin and vmax units
The smaller of vw and vh 		Yes No

This tests accepts all vw/vh values at face value.

Values

iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Puf LG Cy HTC Sa Xia Ub Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
calc()
To perform calculations in CSS 		Yes No
Alt
Requires prefix

Zoom reflow

zoom reflow
Does zoom reflow override box size?

Not supported

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

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 2.1.2; June 2015

iOS 7
WebKit 537
Default browser on iPad 2 with iOS 7.1.2
iOS 7 WebView
WebKit 537
Chrome/iOS on iPad 2 with iOS 7.1.2
iOS 8
WebKit 600
Default browser on iPhone 4S with iOS 8.3
iOS 8 WebView
WebKit 600
Chrome/iOS on iPhone 4S with iOS 8.3
Android WebKit 4
WebKit 534
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.1.2
Default browser on Sony Xperia S, Android 4.1.2
Default browser on LG L5, Android 4.1.2
Default browser on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Default browser on HTC One X, Android 4.2.2
Android 4 WebView
WebKit 534
WebView on Samsung Galaxy Note I, Android 4.1.2
WebView on Sony Xperia S, Android 4.1.2
WebView on HTC One X, Android 4.2.2
WebView on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
WebView on Xiaomi M2, Android 4.1.1
All these WebViews were tested with the HTML5Test Android app.
Chromium Puffin
Blink; Chromium 30
Possibly proxy-ish browser; doesn’t make connection to my internal server, but does do some stuff client-side.
4.0 Free Edition on Samsung Galaxy Note, Android 4.1.2
Chromium LG
Blink; Chromium 30
Default browser on LG L70, Android 4.4.2
This is LG’s Chrome.
Chromium Cyanogen
Blink; Chromium 33
Default browser on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
This is Cyanogen’s Chrome.
Chromium HTC
Blink; Chromium 33
Default browser on HTC M8, Android 4.4.4
Chromium Samsung
Blink; Chromium 34
Default browser on Samsung Galaxy S4, Android 5.0.1
This is Samsung’s Chrome.
Chromium Xiaomi
Blink; Chromium 34 or 35; see this blog post
Default browser on Xiaomi M2, Android 4.1.1
Chromium Ubuntu
Blink; Chromium 35
Default browser on Ubuntu Phone 14.10
Chromium Opera
Blink; Chromium 43
30 on LG L5, Android 4.1.2
30 on Wolfgang AT-AS45FW, Android 4.2.2
This is Opera Mobile.
Chromium Google
Blink; Chromium 43
Default browser on Nexus 7, Android 4.4.2
Default browser on Motorola Moto G, Android 4.4.4
This is Google’s regular Chrome. I test it only on devices where it is the default browser.
Chromium WebView 30
Blink; Chromium 30
WebView on LG L70, Android 4.4.2
WebView on Samsung Galaxy S4, Android 4.4.2
All these WebViews were tested with the HTML5Test Android app.
Chromium WebView 33
Blink; Chromium 33
WebView on Nexus 7, Android 4.4.2
WebView on Motorola Moto G, Android 4.4.4
WebView on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
All these WebViews were tested with the HTML5Test Android app.
Chromium WebView 37
Blink; Chromium 37
WebView on HTC M8, Android 4.4.4
All these WebViews were tested with the HTML5Test Android app.
UC 9
WebKit 534
UC 9.9.5 on Huawei C8813, Android 4.1.1
The largest Chinese browser. This is the full Chinese variant, not the proxy. These browsers were pre-installed (next to Android WebKit; don’t ask me why).
UC 10
UC 10.2.0 on Xiaomi M2, Android 4.1.1
UC 10.0.2 on Samsung Galaxy S4, Android 4.4.2
The one on the S4 is an English install. I don’t know if that matters, but it could.
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z30 (BB OS 10.2.1)
Nokia Xpress
Gecko 20100401; this version was used for some Firefoxes from 3 to 4.
Proxy browser
5.5 on the Nokia Asha 311, S40.
UC Mini
Gecko; don’t know version number
Proxy browser
9.4 on Motorola Moto G, Android 4.4.2
9.4 on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Opera Mini
Presto
Proxy browser
7.6 on Samsung Galaxy S4, Android 4.4.2
8.0 on BB Torch 9800 (OS6)
8.0.3 on iPad 2, iOS 7.1.2
Opera Classic
Presto
12.10 on Samsung Galaxy Pocket, Android 2.3.6
Nintendo
WebKit 536
Nintendo browser 3.0.3 on Wii U (OS version unfindable)
Supposed to be based on NetFront, which in turn is WebKit-based nowadays.
Dolphin
WebKit 534
Dolphin 11.23 with JetPack on Sony Xperia S, Android 4.1.2.
Independent full browser for Android, as long as you install both Dolphin and the Jetpack extension.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.5.
IE10
Trident
Default browser on Nokia Lumia 520, Windows Phone 8.0.
IE11
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.1 “Update”
This is a developer phone. That might matter.

Firefox Android
Gecko 33
33 on LG L5, Android 4.1.2
33 on Samsung Galaxy S4, Android 4.4.2
Firefox OS
Gecko 28
Default browser on T2Mobile Flame, the FFOS reference device. 1.3.0 prerelease

Wolfgang AT-AS45FW note: Wolfgang is a Dutch importer and re-brander of phones. In this particular case they seem to have bought Chinese (? probably) phones, re-branded them, then re-sold them to the Whoop company, which re-branded them and sold them to the Hema chain of supermarkets, which sells them to consumers as the Whoop Echo. Supply chain management FTW!