What’s New in Firefox 27

By Craig Buckler
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now

Firefox 26 was released last year. Yes, it was on December 10, but that was 2013! Version 27 arrived on February 4, 2014 and you can get it by auto-updating (menu > Help > About Firefox) or downloading a fresh installation from getfirefox.com.

Most users will wonder what the fuss is about. Fortunately, Mozilla has provided developers with some juicy new features…

Developer Tool Updates

I like the Firefox tools. They’re not a replacement for Firebug just yet, but they’re fast and ideal for quick and dirty editing. A slew of new features have been added in Firefox 27:

  • HTML elements can be edited; you’re free to change that div to a section or any other element.
  • Background colors and images can be previewed.
  • The options panel allows you to choose a default color format (Hex, HSL(A), RGB(A), or color names).
  • Minified JavaScript source code can be deobfuscated using the “{}” icon. That’ll help you understand what those social media widgets are actually doing.
  • Browser reflows can be logged in the console — enable Log in the CSS button drop-down.
  • SVG element styles can be inspected.
  • The dark theme now works consistently across panes.

In addition, JavaScript debugging is made easier with DOM event breakpoints. You can set a breakpoint to automatically fire when a particular browser event occurs. Navigate to the Debugger pane, click the Expand panes icon (highlighted) followed by the Events tab:

Firefox DOM event debugger

A list of current listeners in the page are displayed. Check any to stop execution at that point.

New CSS unset value

Firefox 27 now supports the new unset value, which is a CSS-wide keyword that can be applied to any property. When used, it acts as if it were inherit when an inherited value is available. If it can’t find one — for example, if the property is a non-inherited one such as box-shadow — it applies the browser default.

You can use it with the all property (e.g. all: unset;) to apply the value to every property (except direction and unicode-bidi).

Admittedly, I’m struggling to think of situations where this would be useful.

Miscellaneous Updates

As well as the usual bug and security fixes, Firefox 27 also offers…

  • The cursor property’s grab and grabbing values no longer require a -moz prefix (although these values still aren’t listed in the spec).
  • Support for the prefixed -moz-rgba and -moz-hsla has been dropped.
  • Dashed line support is available on canvas elements.
  • The navigator.vibrate API returns false if the vibration array or duration is considered to be too long. That’ll disappoint some!
  • iframes can be sandboxed to further isolate a page from those it embeds.
  • The SocialAPI supports multiple providers. Mozilla seem eager to push the technology despite relatively low interest.
  • SPDY 3.1 protocol support has been added.
  • Transport Layer Security (TLS) 1.2 has been implemented.
  • The Android version now supports Lithuanian, Slovenian, South African English and Thai languages.

The Developer Tool updates alone make Firefox 27 a worthy upgrade. Version 28 will appear in around six weeks and should offer several user-facing improvements such as better Windows 8/8.1 integration.

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now
  • Some nice dev tools updates in there. Maybe I’ll switch to Firefox for a day and see how it feels. :)

    • Yes same here. update looks great i will use it for couple of days and see if i want to switch from chrome. but still i love chrome

  • Jingqi Xie

    Still doesn’t support dragging or dropping DOM elements in the developer tools.

  • chronicler_Isiah

    Shame it’s unsupported on IOS devices.

  • Jingqi Xie

    There is not a single third party web browser on iOS.

    • OphelieLechat

      Sure there is: Chrome for iOS.

    • chronicler_Isiah

      There are: Chrome, iCab, Mercury, Dolphin, to name just a few.

    • Jim Mortenson

      I thought there was an Opera for iOS.

    • LouisLazaris

      Actually, technically, Jingqi Xie is right, OphelieLechat. :)

      Although there is Chrome for iOS, Apple doesn’t allow them to use their own rendering engine. For example, as pointed out on Wikipedia, Chrome for iOS is the only current version of Chrome that doesn’t use the Blink engine, and still uses WebKit.

      See also:


      and regarding Firefox:


      As for Opera, I’m not sure. I thought they did use their own engine (Presto) but that would seem to contradict the above. It’s probably something Apple started enforcing after a certain iOS version, and now Opera uses WebKit for all its browsers anyhow (including Mobile).

    • Craig Buckler

      Opera was permitted on iOS because it’s essentially a port of Opera Mini for feature phones. It doesn’t support JavaScript execution although it does some clever stuff server-side to render some client-side components.

      Apple do not permit third-party run-times, emulators or anything else which can execute code which is out of their control — which was the primary reason why Flash was banned. With the exception of Opera, all iOS browsers are Safari with a different logo.