Firefox 3 & Web Developers

Jon Hughes — Wed, 28 Nov 2007 14:10:09 +0000

While it pains me to do so, the following warning is needed:

This entry best viewed in Firefox 3

Since Mozilla released the Firefox 3 Beta (Code Name: Minefield) there have been a rash of blog posts regarding the many new features, increased security, and enhanced UI. However, one thing I have yet to see is what I am really need to know: how does this affect web developers?

When I heard that Safari was releasing a PC version of their browser, I was overjoyed... Now I don't need to boot up my Mac to test sites in Safari, right? Well, as we all know, the answer to that very naive assumption is a resounding "Not even close" - We now have just one more browser we need to test in. (Note: Safari did clean up its act a bit since release, but it's still not exactly the same as its Mac counterpart, and thus is simply more work.)

I had my apprehensions when I heard Firefox was jumping up a full version... I was determined to not make the same foolish mistake twice... So I did my research.

Good news? It passes the Acid2 test!

From left to right: Firefox 2, Firefox 3, Internet Explorer 7. Click for larger image.

Looks like we aren't going to have to test in both Firefox 2 and 3*.

* That is, unless you are using the newly-proprietary/implemented enhancements, such as getElementsByClassName ALSO While it is fantastic that the newest Firefox fixes CSS issues, it's not retroactive, so visitors still using FF2 will still have the same problems as before. I recommend waiting until usage is below 5% to completely phase it out.

So, here are what I consider to be the most important things for us Web Designer/Developers to be aware of.

1) Full-Page Zoom

This new scaling scales everything on the page (a la Opera and IE7), not just text. I wouldn't say this means that we can stop using em's for text sizing, but it's good to see that accessibility is beginning to become more supported by the software we use, so it isn't dependant on the designer.

Left: Firefox 2 Zoom, Right: Firefox 3 Zoom. Click for larger image.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=4821

2) Animated PNG (APNG) Support

While I don't look forward to seeing alpha-transparent rotating "Email Me" graphics all over the place like it's 1998 again, I am very pleased to see APNG finally getting implemented. While it wont become a standard for quite a while, it's a step in the right direction. One thing to note is that if your browser does not support APNG (but does support PNG) it will simply render the first frame of the PNG.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=257197

3) Support for arbitrary protocols

This will allow you to map protocols such as mailto:nobody@nowhere.com (Which will use Gmail) or validate:http://www.phazm.com/ (Which will use the W3C validation service) to a proprietary handler, which will allow you to select it instead of only using the default.

UI for notification/accepting Protocol Handlers. Click for larger image.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=372441

4) getElementsByClassName

This has been available for some time using some frameworks, but now it's in the DOM! Now we will be able to loop through all elements with a specific class on our document. The original specification is in the HTML 5 working draft. (link: http://www.whatwg.org/specs/web-apps/current-work/#getelementsbyclassname).

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=357450

5) Support for offline web apps

The support has been added to allow web applications to be run offline. Unfortunately, it will require the apps to accommodate this new system, and thus far, there has been no word from Google saying they intend to code Gmail or any of their other apps to be used offline, but I'm sure it will come in time.

Demo: http://starkravingfinkle.org/blog/2007/02/firefox-3-offline-app-demo/
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=367447

Other useful additions:

Now properly supported:

Added support for:

onCut
onCopy
onPaste
onBeforeCut
onBeforeCopy
onBeforePaste

demo: https://bugzilla.mozilla.org/attachment.cgi?id=272228
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=280959

contentEditable

contentEditable allows you to do inline editing of text.

demo: https://bugzilla.mozilla.org/attachment.cgi?id=157048
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=237964

Resizable=noyes

With Firefox 3 , the window.open property "resizable=no" is ignored, so all pop up windows will now be resizable.

Click here to open a window with resizable=no
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=177838

Long Tool tips

Now, instead of having one huge line for a tool tip, they will wrap over several lines.

To test, hover over this
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=218223

Printing & Absolute Position

Containers that span multiple pages and are absolutely positioned will now correctly wrap to the next page instead of just being cut off.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=154892

A few notes:

By default, you will not be able to run any extensions that haven't been updated to be used with Firefox 3 . However, if you go into about:config, right click, then go to 'New' => 'Boolean' - Enter, "extensions.checkCompatibility" and hit 'OK' then click "false" and restart, you will be able to use the extensions that don't break.
WARNING: Some extensions will actually crash Firefox 3, so if that happens, start up in safe mode with all extensions disabled, then either uninstall the extension(s) that are breaking it, or go set checkCompatibility to "true."

This is somewhat unrelated, but I don't want to make a new blog entry for it, and it is pretty useful: You can use RAMBack in Firefox 3 to free up a bunch of memory that it uses.

Thanks for listening

If you found this helpful or informative, I would really appreciate it if you left a comment... it gets so lonely at nights!

A digg wouldn't hurt either...

Notes from Phazm » firefox