What’s New in Firefox 39

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):

See the Pen CSS Scroll Snap Points by SitePoint (@SitePoint) on CodePen.

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):

See the Pen List-style-type Strings by SitePoint (@SitePoint) on CodePen.

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).

Preconnect

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

Fetch

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:

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:

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.)

Hello and Your Social Networks

You can now invite people in your social network to a Firefox Hello conversation. The aim of this feature is to make it easier for you to connect with your friends. To use this feature you will have to click on the Hello button. From the conversation window you can click on share link and choose the social network of your choice. More details can be found on the Mozilla site.

Reader View

Though it was released with Firefox 38.0.5, Reader View is worth mentioning here. Reader View is similar to Safari’s Reader Mode (albeit not as pretty). It allows readers to view a clutter-free version of a page—stripping away buttons and other distracting elements from the web page. It also changes the page’s text size, contrast and layout to provide a better reading experience.

If it’s available for a given page, you’ll see a small open book icon in the URL bar. Simply click it to enable Reader View, and click again to return to normal:

Wrapping Up

I’ve covered some of the more noteworthy changes in Firefox 39 in this article, but you can read more about all the changes in the official release notes. For developer-oriented changes in version 39, you can head over to Developer Release Notes.

Out of all the changes in Firefox 39, it’s probably the improved developer tools that stand out for me. How about for you? Is there something new that you’re excited about, or have you been left disappointed? Are there any changes here that might win you back over to Firefox? If not, what would it take to draw you back?