CSS3

As you may (or may not) know, I’m an Invited Expert on the CSS Working Group at W3C. Mostly I talk about specs. But today, I’m going to talk about testing.

W3C is working on test suites for the CSS specs, and I wanted us to have more web authors involved. Many of you have been frustrated with the inconsistent levels of CSS support across browsers, and I believe collaborative testing is one of the major ways we can improve the situation.

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.

As well as all the new CSS features we mentioned previously, Firefox 3.6* is gaining a brand new property value: image-rect. This allows you to clip an area of a background image to display only part of the whole.

It uses Mozilla’s proprietary prefix, and takes two values: a URI for the image, and the boundaries of the clipped area (as four comma separated values, like the clip property):

An advantage of not posting for a while is that there are usually plenty of good subjects to talk about when you get back to it…

With a kind nod of the head to our post from way back in 2006, Andy Clarke has posted a screencast (with full transcript and code examples) of RGBa values in action on his website For A Beautiful Web.

Over at Javascript Kit they’ve produced an exhaustively in-depth look at structural pseudo-classes.

On the subject of Javascript, Eric Meyer has written about how it can be leveraged to extend CSS3 support across browsers.

And Helen from Helephant.com writes a good introduction to the box-sizing property.

A first Alpha of Mozilla’s new browser is due for release shortly (probably tomorrow). Firefox 3 saw a lot of work go into speed, stability and the interface, but was slightly disappointing for front-end developers and saw CSS implementation overtaken by Safari and Opera.

3.1 will make up for that with a whole raft of features on their way. Implemented in the current nightlies (and therefore, most likely, in the Alpha) are:

• All remaining Selectors
• Text Shadow
• Box Shadow
• Border Image
• Column Rule

Planned for implementation but not yet landed features include:

• Media Queries
• Transforms

For the stat-hungry amongst us, 3.1 currently scores 84 on the Acid 3 test, and the implementation of Media Queries should take that up to 85.

There’s no indication of it, but I personally would like to see their border-radius syntax brought into line with the standard, and Transitions implemented to complement Transforms. I’ve been playing with Transitions recently, and they’re very cool.

What new CSS features would you like to see in Firefox 3.1?