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.

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.

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.

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.