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.
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.
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-inis replaced with
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.
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,
restart etc. Handy for those of us too lazy to reach for the mouse.
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.
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
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.
Here are the other highlights in no particular order…
- 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.
Using Redis with Node.js
By Ivaylo Gerchev,
Need fast data interactions in your Node app? Learn how Redis speeds caching, message brokering, sessions, analytics, streaming and more.
Build a Website with React and Tailwind CSS
By Shahed Nasser,
React and Tailwind CSS: a beautiful relationship! Learn how Tailwind frees you from writing CSS so you can focus on your React components.
React Fragments: A Simple Syntax to Improve Performance
By Antonello Zanini,
React fragments provide a simple syntax to group a list of HTML elements without adding unnecessary nodes to the DOM. Here's how.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.