CSS3

As you can’t have failed to notice, Google released their Chrome browser today. Chrome is based on the same version of Webkit as Safari 3.1 so should in theory have the same level of CSS support, although based on the very brief usage I’ve had of it so far it seems that text-shadow and @font-face aren’t working.

Update: I should add, of course, that this is still Beta software, and these issues may well be fixed before launch.

Anyone else noticed any missing features?

While browsing TechCrunch this morning, I stumbled across the site for iPhone developers tap tap tap, who had published their sales figures for iPhone apps in the first month. While these were very interesting, what’s even more interesting is the absolutely fabulous way in which these guys are using @font-face.

If you check their stylesheet, you’ll see this:

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {
	  font-family: "Fertigo";
	  src: url(http://www.taptaptap.com/Fertigo.otf)
	  	  format("opentype");
}

Which renders into great looking text like this (at least in my Safari):

Kudos to the tap tap tap people, and if you see more of these in the wild, be sure to let us know!

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.

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?

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.