CSS3

Opera have announced the first Alpha release of the next version of their browser. Codename Peregrine features version 2.2 of their Presto rendering engine, which boasts 100% Acid 3 compliance, a 30% speed boost on certain sites, and a number of new features for web developers.

As CSS enthusiasts it’s the latter we’re interested in, of course, and the notable CSS3 implementations are:

• Web fonts (OTF, TTF & SVG)
• HSLA & RGBA color values

There’s an overview of the new features on dev.opera.com.

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.

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?

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?