Article: What’s New in Firefox 39

An excerpt from

July 2nd saw the release of Firefox 39. (The release was delayed a few days because of some last-minute stability issues.) Firefox has a lot to offer, but has slowly been slipping in popularity over recent years, so it’s always interesting to see what Mozilla is offering to try to win us back!

In this article, I’ll just highlight a few items that stood out for me.

CSS Scroll Snap Points

Firefox is the first browser to fully support CSS Scroll Snap Points. This property provides the ability to snap elements smoothly while scrolling to specific points along an axis—something that otherwise has to be handled with JavaScript.

This property also works in IE 10+ with prefixes. (You can check out the status of the other browsers on the caniuse site.)

Here is a CodePen demo that shows it in action (remember that it only works in Firefox at the time of publication):

List-style-type Strings

Of the other CSS enhancements in Firefox 39, this one caught my eye. The list-style-type property now supports the <string> type. This means you can now use the following CSS snippet:

.asterisk {
    list-style-type: '*';

This also works with the list-style shorthand property. Here’s a little demo (which, again, will only make sense in Firefox 39+ at this stage):

Support for Switch, Preconnect and Fetch

Firefox now supports the new ARIA switch role. Switch plays a similar role to the checkbox and toggle button, but is more suited to a UI element representing an on/off switch. The extra aria-checked attribute of a switch indicates whether the input is on (true) or off (false).


Firefox 39 also includes support for <link rel=“preconnect”>, which allows the anticipation of a future connection without revealing any information.


The Fetch API has also been enabled for network requests from dedicated, shared and service workers. This API provides an interface for fetching resources from, let’s say, across the network. It is similar to XMLHttpRequest, but provides a more powerful and flexible feature set.

Animation and Cubic Bézier Editor

Firefox 37 introduced a new feature called animation inspector. If the selected element was animated, the animation tab provided additional information about the animation with play and pause buttons. Firefox 39 has taken this a step further, enabling you to rewind, fast-forward or jump to a specific point in the animation’s timeline.

While creating CSS animations, you need to specify a timing function. This can be accomplished with a cubic Bézier curve. From Firefox 39 onwards, the cubic Bézier editor includes a number of presets, grouped under “Ease-in”, “Ease-out”, and “Ease-in-out”. You can also try out these animations right away. Here is a screen shot:

Bezier options in Firefox 39

Changes in Developer Tools

There have been a lot of other improvements regarding the developer tools.

###Drag and Drop

You can now move elements around a web page using using drag and drop. All you have to do is click and hold the element and then drag it to its new location. This might come in handy in situations where you want to experiment with the layout of a web page and help in rapid prototyping.

Console History

In the past, whenever you closed the console in DevTools, Firefox cleared your console history. Now, the history persists across sessions. The recent commands you entered are now accessible even if you open the console in another tab or restart Firefox. Moreover, there is now a console command named clearHistory available. This command will allow you to clear the history of entered console commands.

Helper Command

To further assist you with development, a new helper command $_ has been added. Using this command, you can retrieve the value of last evaluated expression—even if you haven’t stored it in a variable.

For example, type 8+8 then enter/return, producing 16. Then type $_ and enter/return, and the console will again print 16.

Hovering over Inline Elements

When you hover over an element in the inspector, the box model for the element is shown overlaid on the page. In Firefox 39, if this element is inline and spans over multiple lines, the box is shown for each individual line. Here is a screenshot:

Hovering inline elements

Debugging Firefox OS Over WiFi

From Firefox 39 onwards, WebIDE—a tool for creating, editing, running and debugging web applications on Firefox OS devices and simulators—will support debugging Firefox OS over WiFi.

This method is not dependent on ADB, and is probably more reliable that the USB method. (In case you’re not familiar with ADB, it’s a command line tool that lets you communicate with an emulator instance or connected Android-powered device. It’s normally used with a device connected over USB.)

Continue reading at

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.