Firefox 3.6 Alpha 1, codenamed Namoroka (after the Namoroka National Park in Madagascar), was released as a nightly download yesterday on the 7th August 2009.
This latest developer test version of the popular browser, based on the Gecko 1.9.2 platform, offers increased support for CSS3, most notably background-size, CSS gradients, multiple background images along with support for the rem unit from the CSS3 values and units module.
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:
Mozilla employee John Daggett has provided some try‐out builds of Firefox with support for the
@font-facefrom 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:
Planned for implementation but not yet landed features include:
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?
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.
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
- 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.