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:
- border-radius: allows block-level elements to have borders with rounded corners.
- box-shadow: adds a blurred drop shadow underneath a block-level element.
- opacity: makes an element and its contents translucent.
- rgba (not as a property, but as a value): for simplicity, I used rgba(0,0,0,0.5), 50% transparent black. This should come out as grey when on a white background.
- text-shadow: adds a blurred drop shadow underneath text.
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:
- Safari 4.0.4/Win
- Mobile Safari 4.0/528.18/iPhone 3G OS 3.1.3
- Research In Motion: BlackBerry OS 5.0 default browser
- Nokia: S60WebKit
- Teleca Obigo Q7
- NetFront 3.5
- NetFront 4.0 concept
- Myriad (formerly Openwave or UP.Browser) Browser V7
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.
Supported on 2.1
Supported on 2.1
Supported on 4.0
Treated as rgb. Alpha component ignored.
Treated as rgb. Alpha component ignored.
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.
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.