CSS3

Benjamin Meyer has been busy creating Anigma, an online game designed to showcase some of the functionality in CSS3, particularly CSS3 Transitions and Animations.

One aspect of CSS3 that hasn’t received a lot of attention so far is the Flexible Box Layout module. Already implemented in the Gecko and WebKit engines, in this alternative box model:

“… the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand.”

It’s probably easier if I show you how this works. NB: you’ll need to be using Firefox, Safari or Chrome (or a variant thereof) to see the demos; and if you’re reading this in a feed reader, you’ll need to visit the original post to see them.

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):

Simon Fraser announces support for CSS 3D Transforms, on Mac OSX Leopard, in the latest Webkit nightlies.

If you want to get a taste of using the CSS 3 Template Layout module, Alex Deveria has written a jQuery plugin which implements the syntax.

I haven’t had the opportunity to try it out yet, so let me know how you get on.

Six Revisions put six questions to the estimable Eric Meyer on the subject of CSS3, and we get some nice link love.

Also (and I’m slightly late with this one) John Resig, creator of the jQuery library, runs an approving eye over the Advanced Layout Module. Webmonkey provide further context. We looked at the module back in 2006 (part one, part two), and my tongue-in-cheek prediction of a ten year wait to use it is now down to only eight years…

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.

Just a flying update, to provide some links of interest (with little-to-no comment):

• Firefox 3.1’s release date has been pushed back a little; I understand that, CSS-wise, Transforms and Web Fonts are the current blockers.
• John Resig takes a look at the implementation of border-image in FF 3.1 (with examples supplied by us)
• The CSS Marquee module has made it to Working Draft status. And now, with the rise of the mobile web and limited screen size, it actually has a practical implementation.

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.

News about developments in CSS 3 is hard to come by at the moment, so please forgive the slow rate of updates on the site in the last month. I attended the @media conference here in London last week and news on progress in CSS was noticeable by its absence, when even HTML 5 had its own session.

I see that Bert Bos has delivered a couple of presentations on the Template (formerly ‘Advanced’) Layout Module, but I can’t find slides of them anywhere. If anyone attended the talks and can send us copies, do please get in touch.

Other than that, the only news is that the CSS WG have released their list of expected module deliverables; the modules listed in the 2007 snapshot along with Media Queries look set to be Recommendations shortly, with many others to take on Candidate Recommendation status.

And that’s it. Sorry there isn’t more, or that it isn’t more exciting. I’m aiming to put together a load of new examples soon, so that should be more interesting!

Update: As mentioned in a comment below, no sooner do I say there’s not much going on than David Baron announces that the remaining CSS3 selectors have been implemented in a build of Mozilla (which will probably be seen in Firefox 3.1), and Media Queries are set to follow. That’s good news.