CSS3

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.

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.

Over at Design Shack they’re four posts into the five-post Introduction to CSS3, which covers Borders, Text Effects, the User Interface and (coming soon) Multiple Columns. A nice intro to the subject if our own examples are too complicated for you :p

The new owners of the Fonts and Web Fonts modules, Jason Cranford Teague and John Daggett, say that only about 20% of the Web Fonts module is required for CSS (it is currently part of the SVG charter), and propose simplifying it before merging with the Fonts module. They hope to have a working draft of the new spec in August.

Jason Cranford Teague has volunteered to edit the CSS Basic UI, CSS Hyperlink Presentation, CSS Fonts and CSS Web Fonts modules and is looking for feedback from users on the latter two. He asks:

Tell me what you think are some of the font styles and features missing from the current specification. What do you expect to be able to do with typography on your Web pages that you can not do now? What are you doing now with kludges that you would like to see simpler ways of doing?

Leave a comment on his blog if you have any ideas; and why not leave a comment here, too, to let us know what your opinions are? No deadline has been given, but I suppose it’s the sooner, the better.

This week has seen the release of a raft of new proposals for features to be integrated into the CSS specification:

• CSS Animation
• CSS Transforms
• CSS Transitions
• CSS Variables

I personally have reservations about the Visual Effects proposals, feeling this is better suited to Javascript, but I seem to be in the minority on this so I will cede to the majority. I’m pretty excited about Variables, however.

The CSS WG had a face-to-face meeting in San Diego last month, and have released their latest resolutions in a series of posts on their blog:

Part I, Part II, Part III, Part IV, Part V, Part VI

Some of the highlights I saw on my first read through:

• Apple’s proposed animation & transition properties are to be considered.
• Web fonts are to be worked on with the SVG team
• The Advanced Layout module is still being discussed but will be renamed the Template Layout module
• A new type of list, tree-lines, was proposed
• A proposal for the use of constants will be published

Obviously there’s a lot more in there, but it’s nice to see that the Working Group is working!