CSS3

The beauty about working on a site that is specifically targeted for one the most popular mobile devices around (aka the iPhone) is that the vendor with the least CSS support (*cough* IE *cough*) doesn’t exist on it (purely because of its inadequate CSS support in this case).

Depending on the browser matrix you have to work with and the platforms you’re coding for, utilizing Level 3 (and some Level 2.1 in IE’s case) selectors simply isn’t realistic, although properties on the other hand can be used to progressively enhance an elements appearance in this particular context.

But what if a site was created to serve one specific handheld device in which Safari (along with its sufficient CSS3 support) was the default browser? Well, this is what Facebook has done with it’s iPhone-specifc UI. By peaking into their stylesheet you’ll notice that they’re implementing a number of Level 3 selectors, properties and property value additions. They include the:-

• User-select property (Webkit prefix)
• Negation Pseudo-class Selector
• RGBA color values (in conjunction with ‘background-color’ and ‘text-shadow’ properties
• Text Overflow property
• Box-sizing property (including Mozilla and Webkit prefixes)
• Border-image property (Webkit prefix)
• Text-shadow property
• Border-radius property
• Multiple Backgrounds
• Opacity

For comedy value, try viewing the site in IE.

Having this sort of free reign on selectors and properties is an interface developers dream in this day and age, and hopefully in a couple of years we’ll be able to structure a stylesheet with some similarly advanced features.

This is just a quick note, to inform CSS3.info readers that the release candidate for Opera Dragonfly alpha 2 has just been released. Check out the Opera Dragonfly web site for download instructions, and the Opera Dragonfly Blog for more information on the release. There will be a short RC phase then alpha 2 will be uploaded to the main Opera Dragonfly URL that is built into Opera 9.5, and existing alpha 1 users will be upgraded automatically. The web site will also be updated to highlight the new features.

One feature of note for readers of this blog is the auto-complete feature for CSS properties and values in the Styles sidebar. Using the up and down arrows will cycle through the valid properties that Opera supports. This (in theory) will give a good indication of all the CSS3 properties that Opera 9.5 (and subsequent versions) has implemented. As CSS editing is live and immediate, it is a great way to test new features and play with the values.

Please give feedback on Opera Dragonfly alpha 2 using the usual channels.

Dave Hyatt informs us that the latest Webkit nightlies now support an experimental implementation of CSS Variables.

The news comes only days after Daniel announced on his blog that he and Dave were in the process of finalizing a new version of the spec based on both feedback from readers and the Webkit implementation.

Nightlies can be downloaded from here and they’ve also provided a fair few test cases.

NOTE: Since mid-September, the Webkit implementation was discontinued for the time being.

Firefox 3 isn’t quite out yet, but already there are some exciting plans for CSS implementation in future versions.

FF3.1 should see all the selectors (test them here), @media queries, text-shadow, font-stretch, and downloadable web fonts with @font-face; FF4 should add calc() and attr() values, along with the Animation and Transitions modules proposed by the Webkit team.

You can see a list of other planned implementations on the Mozilla Wiki.

Opera have released version 9.5 of their browser today, and the good news for our readers (and web users in general) is that there are lots of CSS 3 features implemented. This article on dev.opera.com goes into more detail, but major improvements include:

• @media queries
• text-shadow
• -o-background-size
• opacity
• hsl colours
• overflow-x & overflow-y
• all css selectors
• form pseudo-classes

Download a copy today and take a look at some of the examples on our Preview pages. I’ve just noticed that the background-size example doesn’t work, but that seems to be our implementation at fault, not theirs.