Simon Willison’s Weblog

Firefox 1.5 developer highlights

11th September 2005

Firefox 1.5 Beta 1 is out, and is the most exciting browser release in a very long time. It comes with the Gecko 1.8 rendering engine, which includes a ton of interesting new features. New in this version (unless you’ve been tinkering with the Deer Park series):

• SVG
• Canvas
• CSS3 Columns
• JavaScript 1.6

Let’s take a look at these in turn.

SVG

The Mozilla SVG project has been quietly chugging along for years now, but until quite recently you needed to download an entirely separate build of Mozilla to try it out. Firefox 1.5 is the first Firefox release to include it and opens up a whole new world of vector graphics to web developers. The Croczilla Examples page is a great place to start—be sure to try the interactive demos near the bottom. There’s more about Mozilla’s SVG support on the Mozilla Developer Centre.

Canvas

The <canvas> element introduces a modern 2D drawing API to client-side development, with the promise of a 3D API in the future. It was invented by Apple for use in Dashboard widgets, then written up as a specification by the WHATWG to facilitate compatible implementations in other browsers.

The potential for innovation with <canvas> is enormous. Demos are pretty thin on the ground at the moment, but this interactive demo by Darin Fisher hints at the things to come. The Canvas shell is handy for playing with the API. Devmo has the beginnings of a great Canvas tutorial. This thing (originally a Safari 1.3 demo) is pretty too.

The ability for Firefox extensions to render web pages to images using <canvas> should lead to some very cool new extensions in the future.

CSS3 Columns

The ability to create auto-flowing columns (famously achieved on IHT.com using terrifyingly hairy JavaScript) has long been desired for the web—among other things it’s a neat way of keeping line widths comfortably readable. The CSS3 Multi-column layout module enables this ability, and Gecko 1.8 implements parts of it in the form of the -moz-column-count, -moz-column-width and -moz-column-gap properties—the -moz- prefix is W3C approved syntax for vendor-specific CSS extensions. You can see columns in action on Robert O’Callahan’s blog (Robert implemented column support in Gecko). Devmo’s column documentation has further details.

JavaScript 1.6

According to New in JavaScript 1.6, the new features are E4X support, Array extras and “Array and String generics”. I can’t find anything detailing what the latter means, but the first two are pretty interesting. E4X (aka ECMAScript for XML) is a relatively new specification which promotes XML to a native data type. It lets you do things like this:

var x = <foo><bar>baz</bar></foo>;
alert(x.bar);
x.monkey = "good";
alert(x.toXMLString());

for each (var child in x) {
  alert(x.toXMLString());
}

(Example excerpted from Aaron’s post to the Greasemonkey mailing list.)

It isn’t available within script tags by default: you have to explicitly turn it on with <script type="text/javascript;e4x=1">, presumably to preserve backwards compatibility with existing pages.

Array extras consist of some new methods on the Array class, the most interesting of which are every(), forEach(), map(), filter() and some(). Each of these takes a function reference (i.e. a callback) as an argument and applies it to each item in the array in some manner. Fans of functional programming techniques will welcome these, and they can easily be enabled in older browsers by conditionally modifying Array.prototype. WebReference.com has a tutorial covering the new array methods.

If anyone knows what “Array and String generics” are, please leave a comment!

The above are just the highlights of Firefox 1.5 from a web developer’s perspective. The improvements for regular users are also notable, including re-orderable tabs, caching of browser state for lightning-fast back and forward and lots of cosmetic (and performance) improvements for the Mac version. An unofficial changelog is available courtesy of the Burning Edge.

Exciting times indeed.