CSS3

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.

After many man-hours of work, Opera has unleashed Opera 10. This release contains the Opera Presto 2.2 rendering engine. The two main features in regards to CSS3 are Web Fonts and full support for the CSS 3 Color specification.

The W3C have released an updated working draft of the CSSOM View Module, edited by Anne van Kesteren.

Many of the features defined in the CSSOM View Module have been supported by most browsers for a long period of time, with many tracing their routes back to Microsoft’s Internet Explorer. The goal of this specification is therefore not to reinvent the wheel, but rather to define these features in such a way that they can be implemented by all browsers in an identical way.

The W3C today announced the release of two new working drafts; the flexible box layout module and images values module.

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.

The W3C have announced the creation of four new modules for CSS Level 3. The modules add entirely new functionality and do not extend any previous CSS Level 1 or Level 2 functionality. They are based on proposals from Apple’s WebKit team, and the current drafts are available from the following URLs:

• http://www.w3.org/TR/css3-animations/
• http://www.w3.org/TR/css3-transitions/
• http://www.w3.org/TR/css3-2d-transforms/
• http://www.w3.org/TR/css3-3d-transforms/

The new modules are all in Working Draft status at present, and are going to be developed in unison with related SVG technologies.

Mozilla employee John Daggett has provided some try‐out builds of Firefox with support for the @font-face from CSS3′s web-fonts module. Currently available for Windows and Mac only—no Linux build yet—there remain several caveats as described in his comment on bug 70132, the most important of which being that the same‐site origin restriction is turned on by default, which means that most examples on the web will not work until you turn it off.

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.

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.

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.