What’s New in Firefox 22

Firefox 22 was released on June 25, 2013 — a little under six weeks after Firefox 21. That was slightly underwhelming when compared with previous releases so let’s see what version 22 has to offer…

WebRTC Support

Firefox has joined Chrome with native WebRTC support.

WebRTC allows you to make video calls, audio calls and share files without plug-ins or third-party software such as Skype. The API is relatively new and experimental — use it at your own risk.

Once Opera moves to Blink, IE will be the only major browser without WebRTC. Microsoft owns Skype so the company has less urgency to enable WebRTC but I suspect it will appear at some point.

Useful WebRTC links:

asm.js

asm.js is a strict subset of JavaScript which permits dynamic compilation and significant performance improvements. If the compiler recognizes asm.js code, it can optimize and run it at near-native speed. However, it’ll still run in a standard JavaScript engine which doesn’t support asm.js.

asm.js is an interesting idea which has been adopted for several game demonstrations. I suspect it could overshadow Google’s Dart project which requires learning a new language and is only supported in Chrome.

CSS3 Flexible Box

Flexbox is a CSS3 layout mode which allows you to define how elements behave when the page adapts to different screen sizes. There’s too much to explain here so look out for flexbox articles on SitePoint soon.

Flexbox is supported in Firefox, IE11 and Opera without a prefix (unfortunately, it seems Opera will revert to a -webkit prefix following its migration to the Blink rendering engine). Chrome and Safari require the -webbit prefix. IE10 requires the -ms prefix.

Developer Tools Updates

Ever wondered what font a page was using? Open Firefox’s Inspector (Menu > Web Developer > Inspector) and it’ll tell you…

Firefox font inspector

While you’re there, click the “Highlight painted area” icon:

Firefox inspector icons

Colors will be overlaid on the page as elements are redrawn. This is very useful; repaints are one of the most expensive browser activities and the tool will help identify performance issues.

You’ll also notice a new “Dock to side” icon which docks the tools to the right of the browser window.

The Firefox developer tools haven’t replaced Firebug entirely, but they’re faster and I find myself using them increasingly often.

HTML5 Audio and Video Playback Speed

Right-click any media playing in the native player and you can select a playback speed: slow motion, normal, high and ludicrous. You’ll be able to listen to tedious podcasts in half the time!

Display Scaling

Firefox 22 supports scaling options to adjust the text size on high-resolution displays. This is currently available on Windows only (wouldn’t it would be more useful on Mac?)

The scaling is controlled by layout.css.devPixelsPerPx in about:config. The default is -1 — you can enter any value from 0.05; a number greater than 1.0 will increase the text size.

Miscellaneous Updates

A few minor changes caught my eye…

  • support for the HTML5 <time> and <data> elements
  • CSS3 @supports is enabled by default
  • the new Web Notifications API is implemented
  • the Pointer Lock API can be used outside of full screen
  • plain text files are word-wrapped (this seems so obvious — why wasn’t it implemented in browsers back in 1995!)
  • WebGL performance improvements
  • improved memory usage when rendering images
  • a social services manager
  • Mac OSX: file download progress is displayed on the dock icon
  • Firefox mobile: support for smaller-screen tablets

Firefox may be losing market share but version 22 is impressive. Even if you’ve switched to Chrome, Firefox remains an essential application for web developers.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://chompdigital.com Justin Y.

    Firefox is getting a little better but when it comes web development I still prefer using Firebug. I don’t care for the dev tools that are built-in to FF personally, but I still like using FF for certain web projects and testing.

  • http://lakeside.com.np Rahul

    I agree with Jason. I too use FF for development purpose. I can feel significant decrease in performance from its earlier version. But hope Firefox dev team will surely increase performance.

    FIREFOX ROCKS.

  • http://www.blackjackinfo.com Ken Smith

    Ack! Firefox 22 removed all the accelerator keys in the bookmark menu. No more right-clicking in the bookmarks menu to edit or delete bookmarks either.
    Is this just on Ubuntu Linux, or did everyone see these changes?

    • http://www.blackjackinfo.com Ken Smith

      This problem was not Firefox 22, but instead the Unity Menu bar for Ubuntu. To disable it, go to about:config and set ui.use_unity_menubar to false. Hope this helps someone.

  • Christian

    Firefox 22 has been good to me so far.

  • http://mhf.ir Muhammad

    Firefox is bettar than any, cause it’s build with us for us. Not for company that support NSA and CIA.