HTML & CSS - - By Craig Buckler

What’s New in Firefox 10

Firefox reached double-digit version numbers on January 31, 2012. It’s been a mere six weeks since we received Firefox 9.0 but there are several interesting features in the new version…

Page Inspector

Firefox now has it’s own built-in page inspector. To launch it, select Inspect from the Web Developer menu, point to an element and choose “Inspect” from the right-click context menu, or press Ctrl+Shift+I. The active element will be highlighted and a bar appears at the bottom of the window showing a clickable breadcrumb trail of the DOM hierarchy.

The HTML button shows the element’s location in the page source while Style displays an editable list of applied CSS rules and properties.

Firefox Inspector

Let’s be honest: it’s not Firebug. But it looks good, works well and will be invaluable on those rare occasions when Firebug isn’t available. I was a little concerned the Inspector would clash with Firebug in some way but I’m yet to encounter a problem.

CSS 3D Transforms

Like the webkit browsers, Firefox 10 now supports CSS 3D transforms which allow you to rotate, skew and translate objects in three-dimensional space. You’ll require the -moz prefix but I suspect more developers will experiment with the effects now they’re supported in Firefox, Chrome, Safari and IE10.

Fullscreen API

The fullscreen API is another webkit feature which has been implemented in Firefox 10. You guessed correctly — it allows a page to launch the browser in full-screen mode which makes it ideal for videos, games and other interactive media.

Before hackers and pop-up advertisers become too excited, you should note that the browser places several restrictions on the feature and users cannot be placed in fullscreen mode without their knowledge or consent. The API is not particularly stable; the W3C Fullscreen specification is an early draft and there are minor differences between the webkit and gecko implementations.

Visibility API

The visibility API allows you to check three new document true/false properties:

  • visible — your document is the foreground tab of a non-minimized window
  • hidden — your document is either a background tab or on a minimized window
  • prerender — your document is being pre-rendered and is not visible to the user

It’s simple but allow us to make more efficient and usable web pages. For example, changing tabs could automatically pause a video or slow down Ajax requests.

Dynamic Forward Button

The Forward navigation button now automatically hides itself when there’s no page to forward to! I’ve not heard anyone complain about wasted toolbar space, but it’s a logical interface enhancement since the button’s rarely used.

Firefox hidden forward button

Better Add-On Compatibility

Probably. Until version 10, Firefox assumed add-ons were incompatible if they were marked as valid for an earlier version. This was rarely the case and you could often force an add-on to install by changing the supported browser number. Mozilla has now reversed the policy; any extension which is compatible with Firefox 4.0 and doesn’t contain compiled code is presumed to be compatible.

Add-on issues have not been stopped completely, but the situation has improved considerably since last year.

Overall, Firefox 10 is a solid release with a good number of features. Say goodbye to version 9.0 and upgrade today … because version 11 will be with us on March 13, 2012.

Sponsors
Login or Create Account to Comment
Login Create Account