Firefox 16: What’s New and Why it was Pulled

Firefox 16 was released on October 9, 2012. Has it really been six weeks since I reviewed Firefox 15? If you managed to upgrade, you were in the minority; Mozilla pulled the download a day later…

Security Vulnerability Warning

Firefox 16 introduced a security vulnerability which allowed a malicious site to examine your history and extract URLs and parameters. Nasty. No one is known to have exploited the bug, but Mozilla took the unprecedented step of removing version 16.0 from their servers and recommending users downgrade to 15.0.1.

Fortunately, Firefox 16.0.1 was released on October 11. If you’ve not upgraded, stop reading this and do it now!

Back already. Let’s continue…

What’s New in Firefox 16.0.1

Firefox has been evolving at a rapid pace. While there are few obvious changes for Mr and Mrs AverageWebUser, Mozilla has added several great tools and updates for developers.

Prefix-less CSS

Fed up typing -moz prefixes? If you’re not using LESS, Sass, Stylus or another CSS pre-processor, you’ll be pleased to hear that Mozilla is the first vendor consider CSS3 animations, transitions, transforms and gradients stable enough to become un-prefixed:

• Animation properties: animation, animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode, @keyframes
• Transition properties: transition, transition-property, transition-delay, transition-duration, transition-timing-function
• Transform properties: transform, transform-origin, transform-style, backface-visibility, perspective, perspective-origin
• Image properties: linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-linear-gradient()
• Unit properties: calc() (one of my personal favorites)

You won’t be able to abandon -moz properties until everyone’s upgraded to version 16+, but I expect the other vendors will follow soon.

Reversed Animations

Until Firefox 16, the only way to reverse an animation was to define a new set of keyframes which operated in the opposite way. Fortunately, the animation-direction property now accepts the following values:

• normal — the animation should play forward each cycle
• alternate — the animation reverses direction each cycle and steps are performed backward. Timing functions are also reversed, i.e. ease-in is replaced with ease-out
• reverse — the animation plays backward each cycle
• alternate-reverse — the animation plays backward on the first play, then forward on the next

You can also mix directions, e.g.

animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

This update is likely to appear in Webkit shortly.

Developer Toolbar

Firefox 16 provides a new Developer Toolbar (Menu > Web Developer > Developer Toolbar):

It features links to the inspector, debugger (see below), console (the number of errors are displayed) as well as a command line. Type help for a full list of commands, e.g. edit styles.css 123, console clear, restart etc. Handy for those of us too lazy to reach for the mouse.

A Working JavaScript Debugger

I mentioned the JavaScript debugger in Firefox 15 (Menu > Web Developer > Debugger):

You’ll be pleased to hear Mozilla has fixed the problem where breakpoints were removed on page refresh, which meant you couldn’t analyze start-up code. It works and looks great. I’m not convinced it’s better than Firebug yet, but will evaluate it over the coming weeks.

HTML5 APIs

A couple of new W3C APIs have been implemented in Firefox 16, although they’re primarily of use to mobile developers:

• Battery Status API: you could, for example, optimize your web application to do less work or make fewer Ajax requests as the battery drains.
• Vibration API: likely to be used in games and for alerts.

Neither API requires the -moz prefix.

Web App Support

Firefox has received updates in readiness for the Mozilla Marketplace (or AppStore if you prefer, but that’ll cause no end of legal shenanigans with Apple and Amazon). With a little effort, you can turn your website into a commercial App which can be promoted in the Marketplace, installed via Firefox and run offline.

It’s a little early to start planning your business strategy — the Marketplace isn’t available yet — but Mozilla has provided preliminary App documentation on MDN.

Miscellaneous Updates

Here are the other highlights in no particular order…

• Incremental garbage collection in JavaScript. Rather than halting the browser, garbage collection is split into smaller chunks of work to improve responsiveness.
• IndexedDB has reached Candidate Recommendation status and has been un-prefixed.
• Recently-opened files can be viewed in the Scratchpad (Menu > Web Developer > Scratchpad)
• The about:memory page displays memory usage per tab (wohh, CNet — do you really need 24MB of precious resources!)
• The Opus Audio Codec is supported by default.
• VoiceOver support is switched on by default in Mac OSX.
• Acholi and Kazakh localizations are available.
• URL highlighting is clearer when using the address bar.
• Firefox mobile receives a new reader mode option to optimize the appearance of articles.
• Dozens of bug and security fixes.

Mozilla’s pace of innovation is impressive. If you’ve migrated to another browser, I recommend you re-evaluate Firefox 16. The development tools alone are worth the download.