CSS contents and browser compatibility - mobile

Last major update on 18 June 2009.

Vodafone

This series of compatibility tests is sponsored by Vodafone.

Desktop table.

My CSS tests, but now on mobile phones.

If you want the latest inside scoops on my mobile tests, follow me on Twitter.

See also the general remarks on the main table.

CSS 2.1 selectors

Can’t really test SEK770i because it doesn’t provide visual feedback in the table below; I can’t see which link I’m clicking, and some links turn out to be unclickable.

Selector Opera Mobile Opera Mini 4.2 S60v3 WebKit S60v5 WebKit Default WebKits Non-default WebKits NetFront Blackberry IE Mobile Skyfire Obigo
(VF WM) Nokia E66 (9.5) HTC Touch Diamond (8.65) SE P1i (8.00) Motorola V3xx Nokia E71 Nokia E66 Nokia E71 Samsung i560 Nokia 5800 iPhone Android G1 Android G2 Bolt (E71) Iris (HTC) Ozone (E71) Samsung F700 Sony Ericsson C510 Blackberry 9500 HTC Touch Diamond Nokia E71 LG
Selects all elements Yes Yes Yes Yes Yes Yes To be tested
 
Selects an element that is a child of another element Yes Yes Yes Yes Yes Yes To be tested
Selects an element that is a next sibling of another element Yes Static Yes Static Yes Static Yes Buggy Static To be tested
Static
the browser doesn’t correctly update the styles of the original element when another element is placed before it.
  • IE interprets pre + p as p.
Selects an element with a certain attribute Yes Yes Yes Yes Yes Incorrect To be tested
  • Skyfire treats p[class] as p. (Or it thinks every paragraph has a class).
Whether an element can support two or more class names Yes Yes Yes Yes Yes Yes To be tested
 
To generate content before and after an element Yes Yes Incomplete Incomplete No Yes To be tested
  • NF & Blackberry doesn’t support images for before and after.
Selector Opera Mobile Opera Mini 4.2 S60v3 WebKit S60v5 WebKit Default WebKits Non-default WebKits NetFront Blackberry IE Mobile Skyfire Obigo
(VF WM) Nokia E66 (9.5) HTC Touch Diamond (8.65) SE P1i (8.00) Motorola V3xx Nokia E71 Nokia E66 Nokia E71 Samsung i560 Nokia 5800 iPhone Android G1 Android G2 Bolt (E71) Iris (HTC) Ozone (E71) Samsung F700 Sony Ericsson C510 Blackberry 9500 HTC Touch Diamond Nokia E71 LG
An element in a hovered (mouseover) or active (mousedown) state. Yes Focus Untestable No Yes Focus No Focus Yes No Incomplete No No Buggy To be tested

The :hover pseudo-class really only makes sense when a mouse cursor is present, as it is on S60v3.

Focus
The :hover styles are applied when the user focuses on the element by touching it, and removed when the user focuses on another element. Touchscreen only.

:active supported by: Vodafone WM, Opera 8.65 SE, S60v3 WebKit, Iris (only while touching the screen), Ozone.

  • NF/SE: links only, hover only
  • Something happens on Skyfire, but it’s not even close to correct.
An element that is the first child of its parent Yes Static Yes Static Yes Static Yes No Static To be tested
Static
The browser does not update the styles when elements are added dynamically.
  • The first time you add a paragraph at the start, WebKit/NokE66 gives the next paragraph (i.e. the previous first-child) the :last-child styles in addition to the :first-child ones.
  • NF/SEK770i can’t do dynamic test because of link focusing problems.
  • S60 WebKit has a last-child bug that may impact first-child.
Form fields that receive user focus Yes Almost Minimal No Yes Buggy No Yes Buggy Yes No No Yes To be tested
  • Op/Mot supports, but only visible very briefly when exiting edit mode.
  • Op/SE applies styles, but removing them is sometimes an issue. Besides, it’s not entirely clear when the SE thinks the user has focused on the form field.
  • NF/Samsung applies styles after user has left form field, and then they’re permanent.
  • NF/SE applies styles after user left form field editor and keeps them until user focuses somewhere else. That’s odd, but correct on the SE OS.
  • Safari iPhone doesn’t put the focus on the field. Once you’ve clicked on the field (and it has gotten the correct :focus styles) you have to click it again, or your typed text won’t appear. This is caused by the width change.
Selector Opera Mobile Opera Mini 4.2 S60v3 WebKit S60v5 WebKit Default WebKits Non-default WebKits NetFront Blackberry IE Mobile Skyfire Obigo
(VF WM) Nokia E66 (9.5) HTC Touch Diamond (8.65) SE P1i (8.00) Motorola V3xx Nokia E71 Nokia E66 Nokia E71 Samsung i560 Nokia 5800 iPhone Android G1 Android G2 Bolt (E71) Iris (HTC) Ozone (E71) Samsung F700 Sony Ericsson C510 Blackberry 9500 HTC Touch Diamond Nokia E71 LG
Selects an element that is a general next sibling of another element Yes No Yes No Yes No Yes No Yes To be tested
Selects an element with an attribute whose value starts with, ends with, or contains a certain string. Yes No To be tested Yes Yes No Yes No Yes To be tested
 
The first line or first letter of an element Almost Yes Almost No No No Yes To be tested
  • WebKit adds an extra 'T' when you do the dynamic test.
  • Opera (except Mini) leaves out the 'T' of the second and subsequent sentences when you do the dynamic test.
Negation of a selector Yes No Yes Yes No Yes Yes Yes To be tested
The root element, or initial containing block. Yes No Yes Yes No Yes No Yes To be tested
Selector Opera Mobile Opera Mini 4.2 S60v3 WebKit S60v5 WebKit Default WebKits Non-default WebKits NetFront Blackberry IE Mobile Skyfire Obigo
(VF WM) Nokia E66 (9.5) HTC Touch Diamond (8.65) SE P1i (8.00) Motorola V3xx Nokia E71 Nokia E66 Nokia E71 Samsung i560 Nokia 5800 iPhone Android G1 Android G2 Bolt (E71) Iris (HTC) Ozone (E71) Samsung F700 Sony Ericsson C510 Blackberry 9500 HTC Touch Diamond Nokia E71 LG
Element that is a target of a hash (page.html#testHash) direct link to hash Incomplete No Incomplete Yes Incomplete Yes Incomplete No No No Yes To be tested
  • Opera/HTC doesn’t react to the Back and Forward buttons: the element doesn’t apply or remove the pseudo-class at all.
  • Back and Forward buttons are untestable in Opera VFWM; but I assume the bug exists in that browser, too.
  • Opera Mini, Bolt, and Ozone: works with direct link on this page, but not when you use the link on the test page.
For enabled, disabled, or checked form fields. Yes No not :checked No Almost Yes not :checked Yes Almost Yes No Incomplete No Yes To be tested
  • Nokia 5800: Does not work on radio buttons.
  • Blackberry applies the checked styles only when you disable the form fields.
  • You can’t disable form fields in Bolt.
  • Can’t do the :checked test in Iris because I can’t check checkboxes or radios.
  • Impossible to distinguish between checkboxes and radios in Ozone.
Empty elements Yes Static No Yes Static Incomplete Yes No Yes No Static To be tested
Static
The browser does not update the styles when content is added to an initially empty <div>.
  • Safari iPhone correctly removes the :empty styles when content is added but does not re-apply them when the content is removed.
An element that is the last child of its parent Yes Static No Yes Buggy No Static Yes No Static No Static To be tested
Static
The browser does not update the styles when elements are added dynamically.

  • S60v3 WebKit applies last-child style to first-child.
  • Blackberry updates last-child information only when it has to update first-child information. So last-child by itself is static.
Selector Opera Mobile Opera Mini 4.2 S60v3 WebKit S60v5 WebKit Default WebKits Non-default WebKits NetFront Blackberry IE Mobile Skyfire Obigo
(VF WM) Nokia E66 (9.5) HTC Touch Diamond (8.65) SE P1i (8.00) Motorola V3xx Nokia E71 Nokia E66 Nokia E71 Samsung i560 Nokia 5800 iPhone Android G1 Android G2 Bolt (E71) Iris (HTC) Ozone (E71) Samsung F700 Sony Ericsson C510 Blackberry 9500 HTC Touch Diamond Nokia E71 LG
An element that is the only child of its parent Yes Static No Yes Static No Yes No Static No Static To be tested
Static
The browser does not update the styles when elements are added dynamically.

Select elements according to a formula Incorrect No Yes No Yes Incorrect No Yes No No To be tested
Incorrect
browser gets confused in the dynamic test.
Select elements according to a formula Incorrect No Yes No Yes No Yes No No To be tested
Incorrect
browser gets confused in the dynamic test.
Allows you to define blocks of styles that only take effect on certain monitor sizes. Yes No Static No Yes No No No No To be tested
Static
Styles not updated when resolution changes.
  • Bolt gets the screen size wrong, but media queries work correctly with this wrong value.
Selector Opera Mobile Opera Mini 4.2 S60v3 WebKit S60v5 WebKit Default WebKits Non-default WebKits NetFront Blackberry IE Mobile Skyfire Obigo
(VF WM) Nokia E66 (9.5) HTC Touch Diamond (8.65) SE P1i (8.00) Motorola V3xx Nokia E71 Nokia E66 Nokia E71 Samsung i560 Nokia 5800 iPhone Android G1 Android G2 Bolt (E71) Iris (HTC) Ozone (E71) Samsung F700 Sony Ericsson C510 Blackberry 9500 HTC Touch Diamond Nokia E71 LG
Yes Scroll Buggy Yes Untestable Yes Incomplete Scroll Incomplete Scroll Yes Yes Scroll No Incomplete To be tested

Scroll
browser supports position: fixed, but the element behaves as if it has absolute while scrolling. After scrolling has finished it’s placed at the fixed position it belongs in.
Incomplete
browser treats position: fixed as position: absolute.
  • Opera SE P1i supports position: fixed vertically, but not horizontally.
  • Opera Mini doesn’t execute the test script.
Yes Incomplete Incorrect Yes Incorrect Incomplete Yes Incomplete Yes Incomplete Almost Incomplete Incomplete to be tested Yes to be tested
Incomplete
browser treats overflow: scroll and auto as hidden.
Incorrect
browser stretches element on overflow: visible (as IE6 does)
  • Opera HTC shows scrollbars when necessary, but these scrollbars aren’t usable.
  • Opera SE P1i does not support overflow: visible and hidden: block is sized to height of content.
  • NetFront SE K770i and Opera Mini don’t execute the test script.
  • The Nokia 5800 scrollbars are hard to use.
  • Ozone treats overflow: scroll as overflow: auto.
Yes Yes Yes Yes Incomplete Incomplete to be tested

Compatibility depends only on the values block, inline, none, inline-block, list-item, and the table values.

  • As usual, WebKit needs elements with display: table and table-row to show elements with table-cell correctly. Exception: Iris and G2 (RETEST G1).
  • IE Mobile supports display: table and friends and needs the same as WebKit. It does not support display: inline-block.
  • NetFront SE K770i: no inline-block, table.
  • NetFront SE K770i and Samsung F700 Treats run-in and compact as inline.
  • Skyfire doesn’t support inline-block
Types, image, position Yes Almost Almost Yes Incomplete Yes Almost Yes Incomplete Yes to be tested

Compatibility depends on circle, decimal, decimal-leading-zero, disc, lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upper-alpha, upper-latin and upper-roman.

Incomplete
browser lacks two or more values
Almost
browser lacks one value.
  • S60v3 WebKit: no decimal-leading-zero,
  • NetFront SE C510: no lower-greek,
  • IE: no decimal-leading-zero, disc, lower-greek, lower-latin, square, upper-latin
  • NF Samsung F700: no lower-greek
  • Opera Mini: circle as box
  • Bolt: circle as box, disc as square, no lower-greek, bug in list-style-position: inside
Selector Opera Mobile Opera Mini 4.2 S60v3 WebKit S60v5 WebKit Default WebKits Non-default WebKits NetFront Blackberry IE Mobile Skyfire Obigo
(VF WM) Nokia E66 (9.5) HTC Touch Diamond (8.65) SE P1i (8.00) Motorola V3xx Nokia E71 Nokia E66 Nokia E71 Samsung i560 Nokia 5800 iPhone Android G1 Android G2 Bolt (E71) Iris (HTC) Ozone (E71) Samsung F700 Sony Ericsson C510 Blackberry 9500 HTC Touch Diamond Nokia E71 LG
Yes Incomplete Yes Incomplete Yes Incomplete Yes Yes Yes No Yes to be tested
  • Opera HTC in desktop mode, Opera Mini and Bolt do not support max-height by itself, although they do in combination with max-width.
  • Opera SE P1i, NF SE K770i, do not support max-height at all.
How to define more than one background image on an element No Yes No No No No to be tested
Yes No -webkit- Buggy -webkit- No No to be tested -moz- to be tested

On several WebKits (among others G2 and Ozone) the box model itself seems to be implemented wrongly or buggily. Retesting is necessary.

  • The G2 may have a buggy implementation of box-sizing (in portrait mode only). Retesting necessary, but something is hideously wrong here.
Yes Buggy No Yes No Yes No Buggy Yes No No No Yes to be tested
  • Opera HTC doesn’t show the element with opacity at all (i.e. applies opacity: 0).
  • Iris makes the opaque box grey.
Create a text-shadow. Yes Buggy No Incomplete No Yes No Yes No Incomplete No No No No No to be tested
  • Opera HTC supports text-shadow, but the colours and radius are way off.
  • Opera Mini and Iris don’t support radius.
Selector Opera Mobile Opera Mini 4.2 S60v3 WebKit S60v5 WebKit Default WebKits Non-default WebKits NetFront Blackberry IE Mobile Skyfire Obigo
(VF WM) Nokia E66 (9.5) HTC Touch Diamond (8.65) SE P1i (8.00) Motorola V3xx Nokia E71 Nokia E66 Nokia E71 Samsung i560 Nokia 5800 iPhone Android G1 Android G2 Bolt (E71) Iris (HTC) Ozone (E71) Samsung F700 Sony Ericsson C510 Blackberry 9500 HTC Touch Diamond Nokia E71 LG