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 asection
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:
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’sgrab
andgrabbing
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.
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.