What’s New in Firefox 13

Contributing Editor

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Ryan

    “offers PENTY of features and add-on”, might want to fix that :)

    • http://www.optimalworks.net/ Craig Buckler

      Whoops – well spotted. It’s been fixed.

  • http://gianpaj.com Gianfranco

    Thanks for the run-through. You guys provide the best summary for the Firefox updates.
    Cheers for that

  • Anonymous

    How about dropping gecko and use webkit…

  • Yannick

    How about dropping gecko and use webkit ; )

    • http://www.optimalworks.net/ Craig Buckler

      Why? Gecko is as good as webkit if not ahead in some respects.

      Competition is a great thing and we have an active browser market. Why would you want to end that?

    • Jason

      Competition is needed and webkit is FAR from perfect. Hate on IE all you like but they gave us the iframe, and don’t for a second say you never used it during the early-mid 2000′s, it’s awful but we all used it!

      • http://www.optimalworks.net/ Craig Buckler

        Don’t forget that Microsoft also introduced XMLHttpRequest in 1999 – the technology behind Ajax.

  • Kimberly

    I HATE the App Tabs. They are inappropriate for a public computer.
    People are too lazy to click on the History or Bookmarks menu????

    • http://www.optimalworks.net/ Craig Buckler

      You don’t have to use them? I suspect there will be some way of disabling them in about:config too.

  • http://www.webmentor.cr/ Marco

    I still use Firefox. Think it’s fair to support them despite Chrome taking over, given what they contributed to the Web (liberated us from IE no less)

  • jamie

    i think firefox 13 is horrid. it runs SUPER slow and the version of Firebug it upgrades to is THE WORST. i tried it out for a day or two then reinstalled a later version. much happier and faster.

  • smokey

    And it broke the rounded corners on websites all over.

    Which pretty much invalidates anything good that may have come. It’s completely ruined many of my designs.

    This longtime firefox fanboy is extremely upset at firefox right now.

    • http://www.optimalworks.net/ Craig Buckler

      Are you sure about that? I’m still seeing rounded corners in Firefox.

      Is it affecting all sites? If so, check your add-ons and possibly do a fresh install.

      Is it affecting just your sites? If so, it’s a coding issue. Are you using -moz-border-radius without a standard border-radius property?

      • Martin

        Yeah, I noticed they’ve dropped -moz-border-radius, which I thought was odd. But it’ll only have broken rounded corners on *badly coded* websites. People should always be using the standard property as well as vendor-specific ones.

      • http://www.optimalworks.net/ Craig Buckler

        Besides that, border-radius has been a standard property in browsers for at least a couple of years now – you don’t need a prefixed version unless you’re supporting legacy versions.

    • http://oscargodson.com Oscar Godson

      Yeah, on terribly coded sites.

  • Wilhem275

    Till 12.0, when I used right button menu function , a new tab would be opened but not selected.
    With 13.0 it is automatically selected -as happens in Chrome- which happens to be annoying, since I want to continue reading my tab and look later at the search page.

    I understand the need to try some Chrome features, but at least let people choose their own options… if I wanted Firefox to work as Chrome, I’d be using Chrome, dammit!

    • http://oscargodson.com Oscar Godson

      Cmd/Ctrl+click. Plus, right click -> new tab is so slow!

    • Stevie D

      Still can’t beat Opera, which (on the context menu) gives you the option of
      • Open (in current tab)
      • Open in new tab (with focus) – - also works with Shift+click
      • Open in new background tab – - also works with middle-click
      and has done for longer than I can remember.

      • Anonymous

        Don’t like the way that Firefox does something? There’s an app for that!

        …and by “an app” I mean “this Firefox extension” :D

        https://addons.mozilla.org/firefox/addon/tab-mix-plus/

        By default this has “open link in new tab”, “open link in foreground tab”, and “open link in new window” to the context menu, but these are just a few of the hundreds of customizable tab-related settings that this extension exposes. Pretty much all tab-related behavior becomes fully customizable.

        Of course, all of the done-to-death arguments about Firefox requiring extensions for basic functionality vs. browsers coming preloaded with too many features apply here.

  • Anonymous

    In addition to slightly tweaking the underlying transport layer, SPDY introduces some new features for web developers to help speed up your site even more. The new server push and server hints facility can give you a big speed benefit, but it usually requires work on the web developer’s part.

    More information: http://www.chromium.org/spdy/link-headers-and-server-hint

    These features attempt to address a bottleneck with the original HTTP design, where a browser must first download the HTML in order to figure out what additional resources (e.g. images) are required. Only after the page has been downloaded can the browser begin requesting the extra resources. SPDY attempts to fix this by acknowledging the fact that the web server probably knows what resources will be on the page before it has finished constructing it / sending it to the client.

    Server push allows the server to push these resources to the client as part of the same request. For example, the browser requests the home page and the server can then respond with “here’s the HTML as well as the logo image, which you were probably about to ask for anyway.” Server hints are a “softer” version of server push where the server provides polite hints about resources that the client might want to begin requesting while the page is downloading. Server hints prevent sending redundant resources if the client already has them cached, unlike server push. If you want to squeeze out every last bit of extra speed, it is probably possible to be a little bit more intelligent about using server push if you store cache information in the user’s session.

    As of now, server hints are provided using the HTTP “Link” header, while server push does not yet have much support.

    Of course, if you run your own web server you’ll want to check the SPDY documentation link in the article for information about installing support (for Apache this means mod_spdy).

    For Firefox, the following addon adds a green lightning bolt indicator to the awesomebar when the server you’re visiting has SPDY support:
    https://addons.mozilla.org/en-US/firefox/addon/spdy-indicator/

  • Guest

    Ohh 10 years and they still don’t want to fix the stupid moz-focus-inner issue!!!

  • Cherry Austin

    Firefox 13 is unusable for me since the update. When a site tries to load external content, it freezes up completely. Won’t even shut down on Alt4, I have to use the task manager to get rid of it. Examples: Facebook uploader; embedded YouTube videos; Gmail. Plus the advertisement content on very many sites.

    I’m assuming the problem’s something to do with iframes but I’m not bothering to check as would have to load the site in another browser to investigate since Firefox won’t respond. If a browser can’t handle a significant portion of website content, it ain’t a Web browser, regardless of your opinions on how they should be coded.

    Before someone asks: I’ve un- and re- installed it four times, have run malware checks, cleared all caches and histories, run it with all add-ons disabled. I’m on Windows 7.

    • Cherry Austin

      Update:
      I’ve just gone back to a frozen Firefox which wouldn’t show me my Gmail messages. It’s now loaded the content – SIX MINUTES after hanging!

      I’ve also checked some of my own sites that use iframes and they are loading. So it looks like frame content from another server that causes the hang.

      Whatever. Firefox 13 is the browser that won’t browse :(

  • http://rajaforum.com Rudi

    Speed Dial just Feel like using google chrome.. or Opera

  • Anonymous

    It is hanging in lots of websites. This is a crappy release. Even after clearing cache and complete history it hangs in popular websites like gmail and some wordpress blogs.