CSS3

To coincide with Web 2.0 Expo in New York, Opera is organising a free Standards.Next event on the topic of CSS3 the following Friday 20^th November, at the Time–Life Building. This space has been generously donated to us by Time & Life.

The Standards.Next concept is to showcase, teach and raise awareness of future Web standards-based technologies. After two events in London featuring HTML5 and Accessibility, our third event is the first time we’ve brought the event State side. With NYC being a design-centric town, CSS3 was the perfect topic.

The CSS3 Colour module is one of the most implemented CSS3 modules. This was previously in the Candidate Recommendation stage, but has just recently been reverted to Last Call. While this sounds like a step backwards, it was done due to the specification being updated.

The new version of the CSS3 Colour Module has removed those features that were not widely implemented, such as the flavor system colour and the @color-profile at-rule. These dropped features are now in a request for implementation, which basically means the W3C wants browser or user agent vendors to implement the features or they will not be included in the final recommendation. If this is the case, then they will either be dropped completely or moved to CSS Colour level 4. The last call lasts until the 1^st of September. If you’d like to give comments then send them to the www-style mailing list. The CSS Snapshot 2007 is waiting for this spec to go to Candidate Recommendation before it moves from Working Draft to Candidate Recommendation itself.

Now that the colour profile and flavor features have been removed, support is almost complete in three out of the four major browser engines. Firefox 3 supports the entire spec. Safari 3 has a bug with mixed values in RGB and RGBA, and does not support the the currentColor value, but the latest nightlies fixes both of these issues. Opera 9.5 does not support HSLA or RGBA, and doesn’t support the transparent value in CSS3 context (such as on the color property), but these are supported in the ACID3 build of Opera, and will be included in version of Opera that will use Core-2.2.

One of the interesting things about Acid 3 is that it tests parts of the CSS3 Colour and CSS3 Selectors modules, that are a part of the 2007 CSS snapshot. Now that both Opera and WebKit pass the standards part of the Acid 3 test, the support for the snapshot has now also improved. The CSS 2007 snapshot is the state of play in CSS at the end of 2007.

WebKit used to lack support for many CSS3 selectors, but now passes the CSS3 Selectors test on this site, and supports all of these selectors. Opera already supported these, but didn’t support HSLA, RGBA and the CSS3 values for transparent. These were added to pass Acid 3 in a post Kestrel build (which may or may not be back ported). Due to these improvements, support in these two browsers for the CSS 2007 snapshot looks healthy.

Ignoring CSS2.1 for now (which Opera has very good support for), both browsers fully support the Selectors Level 3 spec and the CSS Namespaces spec. For CSS3 Colour, the support isn’t quite as clear cut. Everything is supported in Opera, except the flavor keyword and the various related colour profile properties. These properties are at risk of being dropped by the spec however. WebKit has the same support except it doesn’t support currentColor yet, and has some bugs with allowing mixed values in RGB and RGBA. Firefox has had similar CSS3 Colour support to Opera for a while now

Away from the 2007 snapshot, ACID3 also tests Media Queries. These were already supported in Opera and WebKit, but are not yet supported in Gecko or the IE engine. Web Fonts (@font-face) are in the test and were already supported by WebKit, while Opera was developing support, but speeded up development to pass the test. Finally cursor from CSS3 Basic User Interface was added by Opera to pass Acid 3. I’m unsure if this was already supported by WebKit or not.

Although CSS3 UI is not part of the CSS 2007 snapshot, the spec is close to being complete–apart from lacking an editor or a test suite–and support in one or more browsers exists for many of the properties. The features supported by one or more browsers now includes box-sizing (Opera, Safari, Firefox and IE8), resize (Safari), outline-offset (Opera, Safari and Firefox), nav-up, nav-down, nav-right and nav-left (Opera) and cursor (Opera, Safari and Firefox).