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:
Firefox 11 provides a new stylesheet editor. Visit any page, then select Style Editor from the Web Developer menu or press Shift+F7:
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):
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 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:
div is removed from the DOM.
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.