🤩50% Off over 600 tech courses and books

What’s New in Firefox 27

Craig Buckler

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.