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…
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 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…
While you’re there, click the “Highlight painted area” icon:
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!
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.
A few minor changes caught my eye…
- support for the HTML5
- 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.
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.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja