HTML & CSS
Article
By Craig Buckler

What’s New in Firefox 13

By Craig Buckler

It’s upgrade time again. Following a relatively minor update in version 12, Mozilla has bounced back with a new Firefox release crammed with new features. It should be available as an automatic update by 6 June 2012.

Let’s look at a few of the new toys…

New Home Page

The Firefox home page now offers quick one-click access to bookmarks, downloads, add-ons and options:

Firefox 13 home page

I suspect a Mozilla-branded App Store will appear at some point.

Personally, I never normally use home pages and set them to about:blank. But this it quite useful and I’m using a browser’s default home page for the first time in many years!

Speed Dial-Like New Tab Page

Firefox’s new tab page displays a list of your nine most-visited pages. It’s a feature which has been available in Opera, Chrome, Safari and IE9 for several years:

Firefox 13 new tab page

Mozilla’s implementation is reasonable although I found it a little quirky. For example, you require a browser restart to refresh the new tab page. Unlike other browsers, it’s easy to hide the page grid by clicking the icon in the top-right corner.

Tabs on Demand

When starting the browser, Firefox only loads the active tab. All other tabs in the previous browsing session are loaded when you click them.

This option has been available for a few versions but it’s now enabled by default. It noticeably improves Firefox start-up times.

Smooth Scrolling

Smooth scrolling is another feature I normally disable because some implementations are awful. Mozilla has enabled it by default in Firefox 13 and it’s definitely an improvement.

Reset Firefox Button

Has a rogue add-on or theme ever caused you problems? If so, you’ll be relieved to find a new “Reset Firefox” button in Help > Troubleshooting Information (about:support).

The reset button creates a new profile and migrates your bookmarks, passwords, history, cookies and form data across. Add-ons, themes, search engine and home page settings are scrapped which is likely to resolve 99% of issues.

SPDY Protocol Support

Firefox now supports Google’s experimental SPDY protocol (pronounced “SPeedDY”) which aims to reduce the latency of web pages. In tests, page load times have been reduced by up to 64%.

SPDY is unlikely to affect your day-to-day development tasks but, if you’re interested, you can view the documentation.

Page Inspector Updates

The Page Inspector now offers pseudo-class locking. This is best illustrated with an example:

  1. Hover over a sub-item in any CSS-powered menu.
  2. Right-click and select “Inspect Element”. The Page Inspector will open, but the sub-menu disappears because it’s activated by hover/focus.
  3. The element name will appear in the top-left of the browser window. You can right-click it to lock :active, :hover or :focus states to view the applied styles.

Other Page Inspector updates include:

  • Invalid CSS properties are marked with a warning sign.
  • The Inspector now remembers whether you had the style sidebar open in the previous session.
  • Right-clicking any tag in the HTML pane allows you to copy the inner or outer HTML code.
  • Clicking ‘f’ in 3D View brings an element back into view.

New CSS3 :invalid Pseudo-Class

Firefox 13 introduces the :invalid pseudo-class which is normally applied to form elements with incorrect data, e.g.


<style>
:invalid {
	background-color: #fdd;
}
</style>
<form>
	<label for="email">Your email:</label>
	<input id="email" type="email" required="required" />
	<button type="submit">Submit</button>
</form>

Firefox already supports the :valid, :required and :optional (not :required) pseudo classes. These can now be used in all modern browsers except IE9.

Firefox 13 is a great upgrade. The browser remains fast, offers plenty of features and add-on misery is finally becoming a distant memory.

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account