Web
Article

What’s New in Firefox 35

By Craig Buckler

Here we are again. Firefox 35 was released on January 13, 2015. Few users will notice any differences but there are some exciting new features for web developers lurking under the hood of the unusually large 46MB update (on Windows). If you haven’t upgraded, select Help > About Firefox from the menu or head over to firefox.com.

CSS3 filter Property

The filter property allows you to apply Photoshop-like filters on images or any element in the DOM. The effects include:

  • blur(radius) — applies a Gaussian blur
  • brightness(percent) — changes the brightness. 100% is unchanged, over 100% makes the element brighter and under 100% makes it darker (0% is complete black).
  • contrast(percent) — changes the contrast. 100% is unchanged, over 100% gives less contrast and under 100% gives more contrast (0% is complete black).
  • grayscale(percent) — converts a color image to grayscale. 0% is unchanged and 100% is full grayscale.
  • sepia(percent) — converts a color image to sepia. 0% is unchanged and 100% is full sepia.
  • drop-shadow(offsetx, offsety, blur, spread, color) — similar to the standard box-shadow effect except the shadow will apply to non-rectangular images with an alpha mask applied.
  • hue-rotate(angle) — changes the colors by the number of degrees around the color circle.
  • saturate(percent) — saturates the colors. 100% is unchanged.
  • invert(percent) — inverts the colors. 0% is unchanged and 100% creates a full negative image.
  • opacity(percent) — identical to the CSS opacity property although some browsers will provide hardware acceleration for improved performance.
  • url(file.svg#target) — specifies an SVG filter

Any number of effects can be applied in the same declaration, e.g.

.element {
	filter: blur(2%) grayscale(50%) brightness(10%);
}

All browsers other than Internet Explorer now support filters so I’m expecting to see an exponential increase in usage — especially when combined with animations. For more information and examples, refer to the MDN filter reference.

CSS List symbols Property

There’s no need to use boring numeric or alphabetic lists any longer! The list-style property can be passed a symbols value which defines of any sequence of characters or icons you desire. For example:

ul {
	list-style: symbols(cyclic 'x', 'y', 'z');
}

will present unordered lists with the first item as ‘x’, the second as ‘y’ and the third as ‘z’. The cyclic parameter specifies that the symbols repeat so the fourth item is ‘x’ again.

For more information and examples, refer to the MDN symbols reference.

JavaScript Updates

There have been a number of JavaScript enhancements and additions including:

  • element.closest(selector) returns the closest ancestor (parent, grand-parent, etc.) to the element which matches the selector (it’s identical to jQuery’s API)
  • The Resource Timing API allows you to analyze download statistics for all resources in your document. For more information, refer to Aurelio De Rosa’s Introduction to the Resource Timing API.
  • You can now reference CSS styles using array-like notation such as element.style['background-image'] as well as the usual element.style.backgroundImage property. This brings Firefox in-line with Chrome’s implementation.
  • Redefining variables using let or referencing them before a let statement now throws an error.

Developer Tool Updates

Firefox 35 inspect pseudo elementYou can inspect pseudo-elements added in CSS using ::before and ::after. The implementation is a little different to other tools because elements are shown in the DOM tree rather than CSS properties — which actually makes more sense. Click an element to view its styles.

CSS source maps are now enabled by default for preprocessors such as Sass and LESS (presuming your compiler offers the facility). Ensure “Show original sources” is set in the Inspector or Style Editor configuration — you’ll then be able to link to the pre-compiled code rather than the generated CSS.

Finally, you can view a list of node DOM properties by selecting it, opening the split console, and entering inspect($0). That’s a little cumbersome so I hope the feature will become a panel like Firebug offers.

Miscellaneous Updates

Other random updates include:

  • The CSS mask-type property is enabled by default. It defines whether an SVG <mask> element is a luminance or alpha mask.
  • WOFF2 fonts are supported.
  • Image resizing performance has been improved.
  • Hello — Firefox’s native Skype-alike video chat system — now features conversation rooms.
  • The search bar interface has been improved. I couldn’t see any difference but it may only apply to certain locales such as the US.
  • A new Apps Tool menu and icon allows quick access to the Firefox Marketplace. Many of apps only work on Firefox OS but you’ll find many for the mobile and desktop browser.
  • The PDF rendering system has been upgraded.
  • Nine security vulnerabilities have been fixed.

Version 35 is another good improvement although I’m surprised the upgrade size was so large?

Firefox has a healthy market share and remains a great option for web developers and power users who require a highly customizable application. However, usage has been dropping slowly.

The browser doesn’t suffer the problems and high memory usage of historical versions but it struggles to match the speed and stability of Chrome and Opera. I hope Mozilla can entice users back to Firefox but it’s going to take considerable effort.

If you’ve switched to Chrome as your primary browser, what would make you consider using Firefox?

More:
Comments
efederman22

Nice write up. I've always been a fan of Firefox but recently I switch Chrome to my default browser. It seems to execute Javascript faster.

However, I still use Firefox for web development as I find the dev tools in Firebug to be better than those in Chrome. Also, many of the errors I encounter in Chrome never show up in Firefox.

If Mozilla can increase the speed of Javascript execution I would switch back to Firefox exclusively.

WolfShade

As much of a pain in the a55 it is to develop for IE, I've found that it's generally a little quicker to code for IE, then make adjustments for FF/Chrome, instead of the other way 'round. Much less hack-ish code, esp if you use IE7 or IE8.

Individual results may vary.

^_^

TahirTaous

There are some new awesome features are available in firefox dev tools. such as full page screenshot is good feature i don't if chrome allow us to take full page or visible page screenshot without extensions.

junaid

Thanks for ponting out this. It is really good.

ralphm

If you’ve switched to Chrome as your primary browser, what would make you consider using Firefox?

Payment! stuck_out_tongue

I felt like a real traitor moving to Chrome several years ago, but I prefer the native dev tools in Chrome—which I find much nicer than Firebug's. I still don't find the native tools as good in Firefox, but once they rival Chrome's, I'd be open to switching back.

ceeb

You're probably right. If any browser is going to throw problems, it's IE. To be fair, it's not always a problem as such. IE can be stricter about security and standards than the other browsers.

If you get something working in IE, the chances are that it'll work in Firefox and Chrome. Now if only I could bring myself to do it!...

ceeb

I still find Chrome's tools a little disorientating but perhaps that's because of my many years with Firebug? Interestingly, the next version of Firebug will be an extension to Firefox's native tools.

ralphm

It's probably just your familiarity, as I now find the opposite—the Chrome tools feel natural, supple and easy to use, while Firebug's seem rather clunky and lack some of what I love in Chrome. Glad to hear that ::before and ::after appear in the DOM, though. I love that about Chrome.

RyanReese

I feel the way about Firefox's tools, so it's probably just what you are used to smile .

WolfShade

IE is also real quick to switch into quirks mode or IE7 compatibility mode, which really annoys me. I don't like using the meta tag to force standards mode.

^_^

sg707

I'm sorry to say this but Firefox is on a path of becoming extinct... As soon as I saw the "Please donate" button on default landing page... I knew it's just matter of time. Once popular linux distributor use Chrome instead of Firefox..then it's pretty much RIP. Of course I can be wrong but this is my prediction.

ceeb

In theory, Firefox can't die because it's open source. You've always been able to donate to Mozilla and they've always been immensely profitable thanks to search engine sponsorship deals.

I'm not convinced Linux distros switching browsers would make much difference to the overall market share. Also, Firefox's true open source roots make it more attractive for the OS than the (mostly) Google-controlled Chromium browser.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.