HTML & CSS - - By Craig Buckler

What’s New in Firefox 18

New year, new browser. Mozilla released Firefox 18 on January 8, 2013. You may have received the update already but, if not, click the menu then Help > About Firefox > Check for Updates. Alternatively, head over to getfirefox.com and download a fresh copy.

Firefox has been evolving rapidly and, like Chrome, there are fewer major changes between versions. However, there are a number of geeky new toys in version 18…

New IonMonkey JIT Compiler

According to Mozilla’s benchmarks, IonMonkey offers a 26% JavaScript performance improvement. I’m less convinced it will result in a noticeable real-world speed boost but it’s an impressive claim.

@supports Support

@supports is a native feature detection facility for CSS, e.g.

@supports (text-shadow: 0 0 5px #000)
{
	.blur-text
	{
		text-shadow: 0 0 5px #000;
		color: transparent;
	}
}

In essence, Modernizr-like JavaScript style detection is no longer required. It’s an experimental feature and must be enabled by setting layout.css.supports-rule.enabled to true in about:config.

(Note that @supports was available in Firefox 17 but I didn’t post an article about that version — there was little to report!)

CSS Flexbox Layout

Without going into too much detail, the new CSS3 Flexible Box Layout Module allows you to arrange elements which behave predictably at different screen sizes. There’s no need to use media queries or complex floated blocks.

It’s a little too early to use the feature; only Opera 12.1+ implements a good level of support without prefixes. However, you can try it in Firefox if you set layout.css.flexbox.enabled to true in about:config. For more information, refer to Using CSS flexible boxes on MDN.

Unprefixed Page Visibility API

The Page Visibility API determines whether a webpage is visible. You can therefore detect when the browser is minimized or the user switches tab and react accordingly, e.g. stop a video playing, cancel automatic slide animations, slow down Ajax polling requests, etc.

The API has been available in Firefox since version 10 with the moz prefix. Firefox 18 joins Opera 12.10 with a standard prefixless implementation.

WebRTC Support

WebRTC — Web Real-Time Communication — provides native browser capabilities for VOIP, chat, video chat and file sharing without the need for plugins. The preliminary implementation can be enabled by setting media.peerconnection.enabled to true in about:config but you’ll need to wait a while longer for a reliable API.

Miscellaneous Updates

Not impressed so far? What about:

  • faster tab switching
  • improved image scaling
  • window.devicePixelRatio implementation
  • MozTouch events replaced by W3C touch events
  • Retina display support on Mac OS
  • the window.navigator.battery API has been implemented on Mac OS
  • search suggestions on Firefox for Android
  • improved phishing and malware detection on Android
  • hundreds of bugs have been squished

Finally, animated theme fans (are there any?) will be disappointed to hear that the feature has been removed. Mozilla discovered performance issues as image sizes increased to accommodate various screen resolutions and Retina displays. If you can’t use Firefox without animated themes, install the Personas Shuffler add-on.

Firefox may have lost a few users to Chrome during the past year or two, but Mozilla has not lost their motivation. The browser is fast, stable, looks great, offers excellent development tools and standards support. Try it again — Firefox 18 may surprise you.

Sponsors