What’s New in Firefox 11

Tweet

Where did the last six weeks go? Following the Firefox 10 release on January 31 2012, Firefox 11 was released on March 13. We rarely see major new features in Chrome, so it’s great to discover that Mozilla has added several new toys for us:

Style Editor

Firefox 11 provides a new stylesheet editor. Visit any page, then select Style Editor from the Web Developer menu or press Shift+F7:

Firefox style editor

While there are several excellent add-ons which offer similar functionality — Firebug, the Web Developer Toolbar and Firefox’s own Page Inspector tool — the Style Editor is dedicated to editing styles and does it very well. It’s main advantages:

  • all stylesheet files are displayed — you can disable or enable any by clicking the ‘eye’ icon
  • compressed CSS is automatically decompressed
  • you can add or import additional files
  • all changes are live — start typing and the page will re-render immediately
  • you can save any file to your hard disk
  • it’s fast and looks great.

I’m a fan and will certainly use it on a day-to-day basis.

“Tilt” 3D Page Structure View

Tilt was previously available as an add-on. It’s accessed from the Inspector tool which now offers a “3D” button (Inspect from the Web Developer menu, Ctrl+Shift+I, or “Inspect” from the context menu):

Firefox 3D page structure

The view stacks elements as they are nested in the DOM and displays any which are hidden or off the page. You can zoom in and out, rotate and pan the map using +/-, a/d/w/s, and the cursors. It’s integrated with the Page Inspector so you can use the element breadcrumbs and style windows as before.

The 3D page view requires a graphic card which supports WebGL. Mine does and it runs Trigger Rally without problems but, for some reason, 3D page view wouldn’t work on my PC. Hopefully, you’ll have better luck.

text-size-adjust CSS property

text-size-adjust or, more specifically, -moz-text-size-adjust is a non-standard property which caused much of the CSS vendor prefix controversy. Apple introduced the property for their smartphones and tablets but has not submitted it to the W3C. However, that’s likely to change now it’s been implemented by Microsoft and Mozilla.

text-size-adjust controls how mobile devices size text and show scrollbars when zooming into a web page. It can be set to inherit, none, auto or a percentage — the MDN page explains more.

outerHTML property

outerHTML has finally made it to Firefox — it’s available in all the competing browsers and was originally implemented in IE4.

You may have encountered innerHTML which can extract or replace an element’s descendants with a serialized HTML fragment, e.g.


<div id="myelement">
	<p>Hello</p>
</div>
<script>
var m = document.getElementById("myelement");
m.innerHTML = "<p>Goodbye</p>";
</script>

The resulting HTML:


<div id="myelement">
	<p>Goodbye</p>
</div>

outerHTML is similar to innerHTML except that it can extract or replace the selected element as well as its descendants, e.g.


<div id="myelement">
	<p>Hello</p>
</div>
<script>
var m = document.getElementById("myelement");
m.outerHTML = "<p>Goodbye</p>";
</script>

The resulting HTML:


<p>Goodbye</p>

The div is removed from the DOM.

Miscellaneous Updates

That’s not quite everything. As well as several bug fixes and speed improvements:

  • Sync can synchronize your add-ons across devices.
  • Firefox can now migrate your bookmarks, history, and cookies from Google Chrome.
  • The default HTML5 video controls have been redesigned.
  • HTML5 tags are correctly highlighted when viewing the source.
  • Files can be stored in IndexedDB.
  • The moz prefix has been removed from the Websockets API.
  • When viewing a single image from a URL, the graphic is now centered on a gray background — try it.

Despite the initial teething problems, Firefox gets better with every release. If you were disillusioned with v4.0+ and migrated elsewhere, I recommend you give it another try.

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja

  • Kingsley Silas

    This is awesome. I must get it!

  • Adi

    awesome…..

  • Gianfranco

    thanks for this! i got the update but i didn’t know about all this new features :D

  • Steve

    Clicking on Try it to show an image against a gray background showed the Sitepoint logo on a white background.

    • Chris Emerson

      I hate to ask the obvious question… but are you using Firefox 11? Works for me

  • http://www.50secondsnorth.com Patrick Samphire

    “Despite the initial teething problems, Firefox gets better with every release. ”

    I’ve only just downloaded FF11, so I can’t comment on that, but FF10 was appallingly slow and a massive resource hog. Just starting it up and quitting it on a MacBook nearly froze the whole damned computer. I’m hoping FF11 is better, but if not, I’ll be abandoning it for everything except development (where I wouldn’t live without Firebug, Web Developer and a couple of other plugins).

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

      I doubt it’ll be any better for you. Firefox on the Mac and Linux appear to use more memory and are slower than the Windows version. The situation’s improved, but is anyone on those OSs using Firefox without problems?

      • http://www.nosnetrom.com Jim Mortenson

        I love developing w/FF on my MacBook Pro; never really had any memory or performance problems that I can recall.

      • Steve Browning

        I try not to use on Linux (My main OS) as it is enormous hog of RAM compared to Chrome or Opera. Opera is by far the fastest/least memory intensive on my SUSE 11.4 desktop. Opera is faster even with developer tools installed whereas my Chrome doesn’t have any extra extensions.

  • will

    is there a way to have the developer tools automatically open the html and styles when you inspect an element? i dislike having to turn them on every time.

  • Les

    I do not believe that outerHTML is part of any DOM standard but it has been a while since I looked at the specification… care to enlighten me on this fact?

    Thanks.

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

      Nor is innerHTML (or it certainly wasn’t, but it’s supported in every browser so there’s no real problem using it).

  • Jeroen

    Great stuff. In 3D view the right mouse button lets you move around.
    The style editor may decompress, but it still displays some things on a single line. Which still leaves you with something unreadable / annoying. (see this page for examples)

  • http://www.mybachelor.co.uk Aston

    Love it, my Chrome is freezing up recently, not sure if its my Internet or not I’ll give this a try.

  • http://pro-wizards.com rebo

    Well, FF is kind of buggy for me though it has a lot of features. But surely worth trying it :)

  • Alan UK

    Lots of handy stuff from Firefox (as usual).

  • http://geekswithblogs.net/anirudha/ anirudha

    I am very curious about Firefox and Mozilla. I really don’t know about Firefox 11 goes launched. Thanks for writing a post. I have used Firefox 14 (nightly) these days and very happy to see javascript performance.

    I hope Mozilla will get their better browser share soon.

    Thanks
    Anirudha

    • Craig

      Wow, that’s just pointless cheerleading. Why not hope it becomes more worthy of market share instead? I hope VHS makes a comeback!

  • Michael

    “Tilt” 3D Page Structure View is a really cool thing (but just for fun).

  • User since 2005

    WTF, again major number change and almost nothing new interested for regular user!
    Mozilla should be honetly with their user and tell that it’s marketing only!!

    Bookmarks management is as bad as it was always, memory and cpu usage when many (about 100) cards are open is too high.

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

      How many new features have “regular users” received since tabs were added to browsers in the late 1990s? Very few. The interesting stuff goes on under the hood. Developers utilize new techniques to provide better websites and applications — but they can only do that if the tools are available.

    • Craig

      Also phrased as…

      “Features, features, feartures. I have a hard-on for features! I demand you add some bedazzler jewels to the interface to keep me satisfied!!1″

  • Kise S.

    i just wish instead of these fluffy updates, they would work on separating the UI from tabs, it became obvious how memory hog firefox is when you go to big sites such as huffingtonpost and stay there for while, even tho i have 6GB ram, and about 3GB available firefox became so unresponsive i have to kill it and relaunch it just so that the UI became responsive again

    • http://markadrake.com Mark

      I’m glad to find comments like yours Kise. Firefox used to be a streamlined, very fast, and most standards compliant browser out there. Not sure what happened, but in the past 6 months I’ve had so many issues with it that I no longer use it. Maybe Google is paying them to screw up their software? Either way I think it’s worked out in their best interest as I’m a Google Chrome user now.

      I still fire up Firefox when editing and making small changes to some CSS. That’s it, then I close it because it seriously degrades the performance of my PC. By the way, I’m on Windows 7 on my PC and Lion with my Mac, all-around FF is always hogging system resources and I just keep it closed now.

    • Craig

      HuffingtonPost.com makes 107 HTTP requests and creates a total heap allocation of 200MB (!!) in Google Chrome. For comparison the Django documentation site requires about 13MB. Did you ever consider for a second that site authors control memory consumption more so than the browser itself?

      Also tabs are *part of* the UI. How are they gonna seperate the UI from the UI? The interface runs in an event loop anyway so if it’s gets laggy it’s either a GC pause or you’re just running too many huffingtonpost.com tabs (considering the stats above, just 1 is more than enough).

      In short, you should keep quiet until you get a clue.

      • jlockley

        Excuse me, but I don’t “have a clue” technically speaking, but Firefox was created for the clueless. The memory appetite of 11 is kicking the stuffing out of my max 4gb of ram on separate PC’s and has brought my main laptop with max 3gb to its knees. Streaming anything, which was a breeze before has become a stuttering test of patience with high speed DSL. Whatever is connected to what really does not matter to me, but I, too, desire a more streamlined product. (This is a working, office desktop, not a gaming or graphics machine).
        The people in control of the clues would do well to practice a little noblesse oblige.

  • mafmol

    Thanks for the summary. But in your examples it should be m.innerHTML = “…” and m.outerHTML = “…”

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

      Yes, you’re absolutely right – I’ve updated the code. Thanks mafmol.

  • http://theprettypea.com Amy

    you just inspired me to go back to firefox and discovered why it’s cool! love the 3d view, not sure if it’s useful, but lots of fun! Still use chrome for everyday but will go back to firefox for development I think.