CSS2 declarations

Back to the index.

CSS2 specification.

Here are those CSS2 declarations that have never been included in a CSS3 module. They include such basics as display, position, and overflow.

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

Last major update on 10 December 2013.

I'm writing a CSS book.

iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 31 Mini Mob 12 Mob 18 6 7 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
border-collapse
 Yes Yes Yes Yes Yes Yes Default Yes Yes Yes Yes
  • UC Mini applies border-collapse: collapse by default.
border-spacing
 Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
caption-side
 Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
  • Gecko-based browsers also support left and right.
Columns (tables)
 Yes Yes Yes Yes Yes Almost Yes No Yes Yes Yes Yes
  • When setting a border on a multicolumn, the WebKit-based browsers do not create a middle border, but the other browsers, including Chrome 31 but not 18, do. See page for screenshots.
  • Xpress does not apply borders, except for the middle one.
counters
To assign counters to headings or other elements 		Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 31 Mini Mob 12 Mob 18 6 7 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
display
 Yes Yes Yes Yes Yes ALmost Yes Incomplete Yes Yes Yes ALmost
  • Xpress, UC Mini, and Firefox do not support run-in.
  • UC Mini doesn’t support the table values.
empty-cells
 Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
min/max-width/height
 Yes Incomplete Yes Yes Yes Incomplete Yes - Yes Yes Incomplete Yes Incomplete Yes Incomplete
  • Android WebKit may have issues with min-width. In my test only Samsung and Xiaomi get it right; the rest doesn’t stretch up the element sufficiently.
  • Xpress doesn’t support min-height, or has bugs in its implementation.
  • UC Mini doesn’t support width and height at all.
  • Dolphin and One fail the min-width test: it doesn’t stretch the box beyond the regular width.
  • Firefox doesn’t support max-height.
quotes
 Yes No Yes Incomplete Yes Yes No Yes Yes No Yes No Yes Yes Yes Yes
  • Chrome 18 does not support quotes, though it does support the open- and close-quote keywords.
table-layout
 Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
visibility: collapse
 No No No Yes No No Yes No No No Yes Yes
widows and orphans
 No Yes No No Yes No Android Yes No No - No No - Yes No
  • Opera Mobile 12 supports it on Android (12.10) but not on Symbian (12.00).
  • UC Mini and IE9 don’t support columns at all.
iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 31 Mini Mob 12 Mob 18 6 7 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And

position

See the viewports visualisation app to see how position works on mobile devices.

iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 31 Mini Mob 12 Mob 18 6 7 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
position: other values
static, relative, and absolute 		Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
  • WebKit browsers have a minor bug; see page.
position: fixed final verdict
 Buggy No Almost Almost Yes No Buggy Yes Incomplete Almost No Buggy No Incomplete Almost Buggy Yes Almost Yes Almost No Buggy Incomplete Almost

See the entries below for exactly what’s wrong with the various implementations.
position: fixed basic support
Does the browser try to create a fixed layer at all, or is it just an absolutely positioned layer? 		Yes No Yes Yes No Yes Yes No Yes No Yes Yes No Yes Yes

Browsers that don’t support fixed treat it the same as absolute.

A Yes here says nothing about implementation quality; only that the browser made an effort.
position of fixed layer
Definition has changed since this table was produced. A fixed layer is now relative to the layout viewport, but this entry still assumes it should be relative to the visual viewport.
See the viewports visualisation app.
Safari still does it wrong. 		Buggy - Yes Yes - Buggy Yes Yes - Incomplete - Incomplete Yes Buggy Yes - Buggy Incomplete Yes
Layout
Relative to the layout viewport
  • Safari keeps the layers in position at low zoom levels, but starts to move the fixed layers at a certain point; though always slower than the actual scroll. On the iPhone iOS6 the point is around 400% zoom; on the iPad iOS5 it’s around 100% zoom. I don’t know if this is a difference between iOS 5 and 6 or between iPad and iPhone.
  • Opera Mobile 12 mostly positions the layers relative to the layout viewport, but sometimes jumps to another horizontal position. Never to another vertical position, though.
  • Symbian correctly positions the first layer (top/left: 50px), but I don’t understand the placement of the second layer.
  • UC 8 gets the position of the bottom layer totally wrong: it’s gone.
  • Puffin tries, but fails, to do the right thing. Confusing.
  • IE10 scrolls the top-placed layer with the page when scrolling up, and the bottom-placed one when scrolling down. When scrolling the other way they more-or-less stay in the correct position.
  • Firefox OS does something weird with the bottom: 0 layer. It is not positioned relative to the bottom of any viewport.
iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 31 Mini Mob 12 Mob 18 6 7 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
dimensions of fixed layer
Percentual width and height should be relative to the current dimensions of the visual viewport 		Buggy - Yes Yes - Buggy Yes Layout Yes - Layout - Layout Yes Layout Yes - Buggy Yes
Layout
Relative to the layout viewport
  • Safari changes the dimensions whenever it feels like it. Initially they may be relative to the (layout and visual) viewport, but they don’t stay that way, and never become relative to the visual viewport after you zoom in.
  • I’m not sure relative to what Opera Mobile 12 and IE10 determine the dimensions. Not the visual viewport, and not really the layout viewport, either.
behaviour of fixed layer
Should change width and position immediately and fluidly on scroll or move 		Buggy - Incomplete Almost Yes - Buggy Yes Buggy Incomplete Almost - Buggy - OKish Almost Buggy Yes Almost Yes Almost - Buggy Almost
Almost
The layers grow and shrink with zooming (i.e. keep the same dimensions in CSS pixels), but snap to the right dimensions when zooming stops.
  • Safari scrolls the fixed layers with the page, but at a slower speed.
  • Android WebKit supports Almost, but the layer does not take on the new dimensions after zooming stops. An extra scroll action is needed. Exceptions: HTC and Xiaomi; they do it like Almost.
  • Opera Mobile 12 mostly treats the layer as an absolutely positioned one, except in random circumstances.
  • BB6 hops: layers scroll with page, and then reappear at the correct spot when scrolling stops.
  • BB7 gets it right with vertical scroll, but not with horizontal scroll.
  • Symbian’s behaviour must be seen in order to be believed. It reduplicates layers, hides them, and generally behaves very badly.
  • Puffin sometimes, but not always, repositions the layer after scrolling stops. Zooming gives unpredictable behaviour.
  • IE10’s layers move slightly, but not nearly enough, on every scroll and are then repositioned.
iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 31 Mini Mob 12 Mob 18 6 7 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And

overflow

overflow: auto is complicated on mobile because even when content is hidden from the user there must be some mechanism to reveal that content. Without that, the browser’s overflow implementation is severely compromised.

All browsers that allw the content to be scrolled, do so by the one-finger scroll that’s also used for scrolling the entire document. This gives birth to the tricky topic of scroll quality: is the browser’s default scroll good enough? If not, an extra property is needed.

iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 31 Mini Mob 12 Mob 18 6 7 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
overflow: visible and hidden
 Yes Yes Yes Wrapping Yes Yes Yes No Wrapping Yes Yes Yes
Wrapping
Depends on whether the text is wrapped because of user zoom. If the text is wrapped, the test element expands to contain all content.
  • Opera Mini expands all elements with visible, except on iOS.

Scrolling hidden should be impossible. Fortunately it is in all browsers.
Scrolling
of random elements with a one-finger touch 		Yes No Yes Yes No Yes Yes No Yes No Yes Sort of Yes Yes Yes

Does the browser support scrolling of elements with overflow: auto? If not it should make sure the content of the overflowed element is otherwise accessible.

One-finger scrolling is supported by all browsers that support scrolling.

  • Puffin theoretically offers the option, but it often doesn’t work.
iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 31 Mini Mob 12 Mob 18 6 7 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
overflow: auto
Also scroll, but that value is useless 		Yes Buggy Yes Yes Buggy alt Yes Yes Buggy Yes No Wrapping Yes Yes Yes
Buggy
Browser hides part of the content on overflow: auto but doesn’t give the user any way of reading it. This is a hideous sin.
Wrapping
Depends on whether the text is wrapped because of user zoom. If the text is wrapped, the test element expands to contain all content.
  • Opera Mobile 12 always expands the element to contain all content when overflow is auto or scroll. This is the least bad solution if your browser does not allow touch-scrolling of arbitrary elements.
  • In UC, changing the overflow dynamically causes the box to expand until it fits all the content.

Compare Opera overflow with HTC Android (text adjustment)

Default scrolling quality
 Bad - Good Good - Good Bad Good Bad - Good Meh - Bad Very bad Bad Good Bad Good Good

Whether the browsers’ default scrolling of elements with overflow: auto is any good. Excludes browsers that don’t allow scrolling.

The point of this entry is that only those browsers that have bad default scrolling quality need -webkit-overflow-scrolling: touch.
overflow-scrolling
Apple invention for emulating native scrolling. Prefixed 		Yes - No - Yes - No No - No -
iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 31 Mini Mob 12 Mob 18 6 7 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And

Tested browsers

Mobile browser test array 1.2.3; December 2013

iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.3
iOS 7
WebKit 537
Default browser on iPad 2 with iOS 7.0.4
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on Samsung Galaxy Pocket, Android 2.3.6
Android 4
WebKit 534
Default browser on Samsung Galaxy Note I, Android 4.0.3
Default browser on Sony Xperia S, Android 4.1.2
Default browser on LG L5, Android 4.1.2
Default browser on Xiaomi M2, Android 4.1.1
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy S3, Android 4.1.2
Default browser on HTC One X, Android 4.2.2
Chrome 18
WebKit 535
Default browser on Samsung Galaxy S4, Android 4.2.2
On Sony Xperia S, Android 4.1.2. This is a downloaded version from Google
It will be interesting to see if Samsung’s purported Chrome 18 is really the real Chrome 18.
Chrome 31
Blink (Chromium 31)
On HTC One X, Android 4.2.2
On Nexus 7, Android 4.4
Opera Mini
Presto
Proxy browser
7.0.5 on iPad 2, iOS 7.0.3
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia PureView 808, Symbian Belle
7.5 on Samsung Galaxy Note I, Android 4.0.3
Opera Mobile 12
Presto
12.00 on Nokia E7, Symbian Anna
12.10 on Samsung Galaxy Pocket, Android 2.3.6
Opera Mobile 18
Blink (Chromium version not given; likely 30 or 31)
On Sony Xperia S, Android 4.1.2
On Nexus 7, Android 4.3
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 Z10 (BB OS 10.1)
This device has 1GB of internal memory instead of the customary 2GB, which may matter in performance tests.
Xpress
Gecko 20100401; this version was used for some Firefoxes from 3 to 4.
Proxy browser
3.9 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. Also, rumour has it that Nokia is quietly hiring back ex-MeeGo people, so a Nokia-based restart is not entirely impossible.
Anna
WebKit 533
Default browser (7.3) 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 (8.3) on Nokia PureView 808, Symbian Belle FP2
The most recent Symbian build.
UC Mini
Gecko; don’t know version number
Proxy browser
8.8 on HTC One X, Android 4.2.2
UC
WebKit 534
UC 8.5.1 on Xiaomi M2 (Android 4.1.1)
UC 9.2.3 on Huawei C8813 (Android 4.1.1)
The largest Chinese browser. This is the full variant, not the proxy. These browsers were pre-installed (next to Android WebKit; don’t ask me why).
Puffin
WebKit 534
2.1 Free Edition on Samsung Galaxy Note, Android 4.0.3
Claims to be Chrome 11
Nintendo
WebKit 536
Nintendo browser 2.0.0 on Wii U 4.0.0
Supposed to be based on NetFront.
Dolphin
WebKit 534
Dolphin 10 with JetPack on Sony Xperia S, Android 4.1.2.
Independent full browser for Android, as long as you install both Dolphin 10 and the Jetpack extension.
QQ One
WebKit 533
4.2.2 on HTC One X, Android 4.2.2
This is the downloadable, international browser TenCent created.
Tizen
WebKit 537
Default browser on Ref.Device-PQ by Samsung; Tizen 2.2
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.5.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.0.
Firefox OS
Gecko 18
Geekphone/Telefónica (Peak and/or qcom); Boot2Gecko 1.0.1.0-prerelease
Default browser on ZTE Open, FF OS 1.0.0802
The ZTE Open will get an upgrade to 1.1 pretty soon.
Firefox Android
Gecko 25
25 on Samsung Galaxy Pocket, Android 2.3.6
25 on HTC One X, Android 4.2.2