Firefox 3: What's New, What's Hot, and What's Not

Improved SVG Support

Firefox supported Scalable Vector Graphics (SVG) since version 2. SVG is an XML-based language used to represent vector images. Some examples can be found on the W3Schools web site, including the following:

<?xml version="1.0" standalone="no"?>      
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"      
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">      
     
<svg width="100%" height="100%" version="1.1"      
 xmlns="http://www.w3.org/2000/svg">      
<rect x="20" y="20" rx="20" ry="20" width="250" height="100"      
 style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>      
</svg>

This code, if parsed by an SVG-compatible browser such as Firefox 2 or 3, produces a rectangle with rounded corners, like the one shown in Figure 9, “The SVG code above renders a rectangle with rounded corners”.

Arguably, SVG (and SVG manipulation via JavaScript) can be considered a replacement for proprietary technologies such as Adobe Flash and Microsoft Silverlight, with the important advantages that it’s an open standard (SVG 1.1 is a W3C recommendation) in plain text format rather than binary.

Firefox 3 extends Firefox’s SVG support by implementing the pattern, foreignObject, and mask elements, and all the filters defined in SVG 1.1 specification. Additionally, a lot of SVG-related bugs have been fixed in this release, so that it’s now possible to interact in an acceptable way with complex SVG-based applications such as the Lively Kernel.

Still, Firefox 3 isn’t as fast as Safari 3 and WebKit at rendering SVG, although it’s definitely faster than Firefox 2.

Animated PNG Images

Another very important feature related to graphics and animations is native APNG support. A key incentive for implementing APNG support is to be able to display animation without relying upon Compuserve’s proprietary Graphics Interchange Format (GIF).

If you were browsing the web in the nineties, you certainly remember those cute but very annoying, poor-quality GIF animations that plagued the Web. They only had 256 colors, and they didn’t really support transparency. More recently, they have been rediscovered as throbbers for almost any Ajax web application: whenever you have to wait for the end of an XMLHttpRequest call, chances are that you’ll see a throbber spinning to indicate that you have to wait a little longer.

Although GIF animations look ugly for anything more complex than a throbber, APNG images do not. APNG images are definitely smoother, and they support transparency and 24-bit colors. You can see a few examples on the Mozilla Labs site, including a spinning version of the Firefox logo in Figure 10, “The Firefox logo, an animated version of which appears on the Mozilla Labs site”.

Unfortunately APNG is only supported by Firefox 3 and Opera 3.5 for now (don’t forget that IE barely started to support static PNGs with IE7!), so you can’t expect everyone to see your fancy APNG animations as you intended. The good news is that APNG is fully backwards compatible with PNG, so any browser that’s able to display PNG correctly (or incorrectly, like IE6 does), will render an APNG animation as a static PNG.

How do you create APNGs? Well, you can just use the appropriate Firefox Add-on.

Microformats

Firefox 3 comes with native Microformats support. That’s good to know, but what does it actually mean?

Microformats, as defined by microformats.org, are:

More specifically, a microformat is a representation of meaningful information using semantic XHTML and following a set of rules and conventions.

Microformats.org defined a few open standards for microformats, including:

• hCard, for people and organizations
• hCalendar, for calendars and events
• VoteLinks and hReview, for opinions, ratings and reviews
• XFN, for social networks
• rel-license, for licenses
• rel-tag, for tags, keywords and categories
• XOXO, for lists and outlines

For example, an hCard looks like this (the example is taken from the Microformats Wiki):

<div class="vcard">      
 <a class="fn org url" href="http://www.commerce.net/">CommerceNet      
 </a>      
 <div class="adr">      
   <span class="type">Work</span>:      
   <div class="street-address">169 University Avenue</div>      
   <span class="locality">Palo Alto</span>,      
   <abbr class="region" title="California">CA</abbr>      
   <span class="postal-code">94301</span>      
   <div class="country-name">USA</div>      
 </div>      
 <div class="tel">      
   <span class="type">Work</span> +1-650-289-4040      
 </div>      
 <div class="tel">      
   <span class="type">Fax</span> +1-650-289-4041      
 </div>      
 <div>Email: <span class="email">info@commerce.net</span>      
 </div>      
</div>

If you take a closer look, this is nothing but ordinary XHTML, which follows a set of conventions concerning nesting, CSS class names, and tag types. As a matter of fact, despite its fancy name, the previous hCard will be rendered just like ordinary XHTML code.

This is important because if a developer decided to put an hCard on a page, it would follow the same standard as other hCards, which would make it easy to parse the hCard data automatically, for example. To understand what this means, you’d do well to install the Operator extension for Firefox (available since version 2).

Operator is able to parse microformats and present them to the user in an organized way via a toolbar, as shown in Figure 11, “The Operator toolbar in action”.

As you can see from Figure 11, “The Operator toolbar in action”, the information is still present on the actual web page, but it has also been parsed by Operator, which enables the user to perform a set of default actions that are available for the specific information type. In short, as outlined on ReadWriteWeb, Firefox may turn into a sort of information broker by using microformats to connect the users to many popular web and desktop services. The Operator extension is still available, along with a few other ones, so Firefox 3 can parse and display microformats via extensions, exactly like Firefox 2.

So where’s the long-awaited native support for microformats? Apparently it’s only under the hood: Firefox 3 exposes a brand new API for parsing microformats using JavaScript. That’s definitely a good thing, but it’s a shame that microformats aren’t parsed and rendered in some way natively by the browser. Apparently this omission was due only to the inability of some of the folks at Mozilla to make up their mind and define a standard GUI: a lot of ideas were proposed, and a few cool mockups were created, but none made it to the end product.