CSS eye-candy in mobile browsers, a comparison

My current job involves a lot of web development for mobile phones. Compared to the WAP phones of 10 years ago, present day phones are like supercomputers, with browsers almost as capable as those on the desktop. The major challenge posed by designing for these devices is making sure that mobile web sites are lightweight in terms of bandwidth, easily viewable on a small screen and that the site can be navigated easily with both the four-way directional key as well as with a touchscreen. With mobile browsers catching up to desktop web browsers, I figured it would be a good time to take a look at some of the eye-candy effects that are possible with CSS2 and see what the support for these effects is across the mobile browsers.

Support for these CSS properties is not crucial as they don't seriously affect page layout. They do enable more sophisticated designs that could be faked by using copious amounts of transparent .PNG images, this is often extremely cumbersome, especially when having to deal with the small, yet wildly varying screen sizes on mobile phones. Accomplishing these effects using CSS significantly reduces developer effort and makes the markup lighter.

What was tested?

The CSS properties tested were:

For border-radius and box-shadow, the -moz- and -webkit- prefixed versions were also tried on Gecko- and WebKit based browsers respectively. The -o- prefixed version for Opera were not supported by any of the Opera browsers.

I have attempted to find a reasonably good balance between with the browsers currently used "in the wild", some upgraded to the latest version that is available for their platforms, some publicly available beta versions. Desktop browsers, run on Windows 7, were included in the test for comparison. Browsers tested:

There is a newer version of IE Mobile available, but given the results for the Windows version, I don't think that will have any impact on the outcome. Myriad have used a WebKit rendering engine for V9 of their browser which had wanted to include in the test, but I have not yet been able to find any handset that uses it. If you know of one, please drop me a line.

Results

Test Apple RIM Google Microsoft Mozilla Nokia Opera Obigo Access Myriad
Safari iPhone BB Chrome Android IE8 Mobile Fx Fennec S60 Web Mini Mobile Q7 NF V7
border-radius
Supported on 2.1
-moz-border-radius
-webkit-border-radius
box-shadow
Supported on 2.1
-moz-box-shadow
-webkit-box-shadow
opacity
Supported on 4.0
rgba
Ignored entirely.
Ignored entirely.
Treated as rgb. Alpha component ignored.
Treated as rgb. Alpha component ignored.
Ignored entirely.
Ignored entirely.
text-shadow
Blur radius is ignored.

Note that Internet Explorer, NetFront and Myriad V7 completely ignore rgba colour values. Since they have no support for these attributes, they should treat the rules as invalid and non-existent. This conforms to the standard, but is something to be aware of, as the browser will behave as if the element had no colour specified (or in case of a background colour, is fully transparent). Nokia's S60 WebKit browser and Q7 handle the declaration, but don't actually apply the translucency. This is not correct, but probably desireable.

At the recent Mobile World Congress, Research In Motion have announced that they will be replacing their own browser with a WebKit based effort. I think it is reasonable to assume that will support similar features to Safari Mobile on the iPhone or the recent Android browsers. Although the current browser (especially with BlackBerry OS 4.7 or later) is not a bad browser, it is relatively underspecced. It supports none of the advanced features with the exception of an alpha component specified in a colour.

It should also be noted that all the browsers that support both rounded corners and box shadows will correctly compute the shadows for those rounded corners.

Conclusion

Overall, I'm not too disappointed by these results. Within these test parameters, Apple and Mozilla have reached parity with their desktop web browsers (pedantically speaking, so has Microsoft, by supporting absolutely nothing at all in either). Android 2.1 has actually managed to pull slightly ahead of its desktop counterpart, by directly supporting the "box-shadow" property when Chrome doesn't. The only performance I find truly diasappointing is for the NetFront 4.0 concept browser. The UI is unpolished and advanced CSS support is poor for a browser released in 2010. The final release might be better, but I won't get my hopes up. It seems the most capable browser by far for Windows Mobile is Opera.

The most common browser on low-end handsets by far is the UP.Browser (a.k.a. Openwave, a.k.a. Myriad Browser V6 and V7). While this is installed on an estimated nearly 2 billion handsets, the trend towards ever more powerful phones means the number of such devices actually in use will drop rapidly. More modern phones have more modern browsers, with Opera being extremely common on current smartphones and WebKit-based browsers are gaining in popularity as well. These are excellent browsers and they support these special effects already or will in the near future. More importantly, users with these advanced phones and browsers tend to be a much more significant source of mobile web traffic.

So, go ahead and use these CSS properties to enhance your designs where they are supported. Conforming user agents ignore rules they cannot handle and all of the browsers I have tested did so without any undesireable hiccups.

Tags:

Comments

Peter Kelly

"While this is installed on an estimated nearly 2 billion handsets, the trend towards ever more powerful phones means the number of such devices actually in use will drop rapidly."

I have to disagree with this statement - given the current price and availability of more powerful phones, the decline of lower end devices will not be rapid - especially in a global context, when you include countries like South Africa and India, large populations, low income but requiring mobile communications.

Given that they are only able to purchase cheap affordable devices, like Nokia, Sony Erricson, etc - these devices are limited to, at best, xhtml mp 1.0 support and some CSS support.

Steven Don

You might be surprised. What I mean is not a shift away from the low end devices themselves, but that even those cheap and affordable devices are beginning to be able to handle more and more such things. Please note that the statement specifically refers to low end devices with UP.Browser installed. Not just low end devices in general. They may (and probably do) exist, but I personally know of no recent devices that were built with this browser. At least the new Nokia devices (by far the most popular brand in Africa and, indeed, the world) are built with WebKit browsers or Opera Mini.

The decline of current low end devices will, I think, be rapid. While the Nokia 2610 with its very limited browser was hugely popular in Africa (accounting, at one point, for roughly 50% of traffic in our logs), it has been discontinued. Replacements or new purchases are more along the lines of the equally affordable 6700 classic. New low end devices such as these are getting more and powerful, comparable to the high end devices a couple of years ago. That 6700 classic specifically is already built on Opera Mini.

One of the projects I have done earned most of its mobile traffic from Africa, serving roughly a million page views to Nigeria alone. What we have seen from our logs is that while the UP.Browser in particular may have a huge installed base, its actual traffic share is minimal enough to be pretty much negligible (barely cutting 1%). Your mileage may vary of course.

Sepatu Futsal

Sucks IE8. not supported border radius. I develop a web for a company but they using IE8 and I didn't know that border-radius doesn't support it. They cancel the order just because of damn IE8.

Post a comment