PRP - artifact #1 - CSS 3.0 compliance

Although my desktop design attempted to use some of the more modern design schemes to try out on the mobile browsers, there are still a few more that I have decided to test out. This is a result of finding that the mobile browsers, most of them modern, are capable of applying features that even Internet Explorer has yet to catch up with!

I will be experimenting with what CSS 3.0 features work. This offers great possibilities, including the new way to apply custom fonts online, and I personally can't wait for everyone to get updated to a CSS 3.0 compliant browser.

Some of the other possibilities of CSS 3 include drop shadows, rounded corners, opacity, as well as the above mentioned font-face. These are the elements I will test out.

---------------

RESULTS

To get the font-face to work, I had to provide a variety of formats, such as TTF, OTF, EOT, WOFT, this last hopefully being the agreed format that all the modern browsers will look for and accept.

The results were both surprising and disappointing.

iPhone:

The most useful elements of CSS3, font-face and transparency work, alongside drop shaow. This is good. Rounded corners do not, yet this could probably be accomplished through specifying specific browsers in the code. This is the best render of all the browsers tested.

Importantly, I had to remove the 'opacity' tag and swap it for rgba(lpha) for all tests as currently the spec dictates that all child elements acquire opacity too. RGBA doesn't and so proves more useful.

ANDROID:

Rounded corners, transparency and drop shadows, but no font-face. This is disappointing.Some people have hacked Android to get it to function, but as of version 2.0, it doesn't work.

NOKIA:

Technically this is how it should display. I chose to render the green box as about 25% width of the screen, and 100% height. Unfortunately, no font-face, no rounded boxes, no transparency and no shadow. Worst of the test subjects.

OPERA MINI:

Transparency, drop shadow - check. Rounded corners and font-face no, so an average but mainly poor render. Furthermore, like Nokia it doesn't alter the typeface to Georgia, apparently only having in house fonts.

-------------

Overall, I've learned from this that CSS3 support is iffy, and therefore cannot be relied on. Should I be a sole iPhone designer, a viable market admittedly, I could proceed in utilising the modern tags, yet as with the desktop browsers, it seems like its going to be a cross-browser nightmare to get consistency.

@