8

I was thinking of updating to Firefox 4 (currently running Firefox 3.6.15 -- hold on not a software question specifically!) and had some concerns when it comes to web development.

My only concern is if there are any compatibility issues (CSS / HTML) or quirks between the two. I would hate to see something like a 3px spacing while using Firefox 4 on one website vs 0px using Firefox 3 (almost like an IE6 vs IE7 vs IE8 fiasco, if you get my drift).

Ultimately I am just checking if Firefox 4 is business as usual with the display of a website / web app with an updated 'engine' (which is what I expect).

Thoughts? Has anyone compare at this level? And I'm not just talking things like on the CSS Reset level, altho I am thinking along those lines of compatibility.

Hopefully I am making my concern somewhat clear. I couldn't seem to find any comparisons other than enhancement list to FF4 (over FF3), I don't mean to make this a software question but rather, should I be aware of any output changes that I am missing by upgrading. I don't want to miss critical differences when it comes to development and browser compatibility for the customer.

Thanks.

Jakub
  • 20,418
  • 8
  • 65
  • 92

5 Answers5

4

https://developer.mozilla.org/en/Firefox_4_for_developers

John M
  • 13,053
  • 3
  • 27
  • 26
3

Even IE6 / IE7 / IE8 vs other browsers isn't as big a fiasco as you make out; the bugs in old IE versions with weird spacing differences were mainly caused by web sites forcing the browser into Quirks mode (which lives up to its name) rather than standards mode. If you're in standards mode, the browsers all pretty much live up to the same rules, albeit with fewer features in older versions (much fewer features in the case of IE6).

With that in mind, the upgrade from FF3.6 to FF4.0 shouldn't present you with any issues for existing sites written with FF3.6 in mind (and standards mode in general).

The only major caveat that I'm aware of with FF4 is that they've removed the -moz-binding CSS feature. This is (or rather, was) a Firefox-specific (ie non-standard) CSS feature which allowed you to bind an XUL template to an HTML element using CSS. XUL is the XML UI definition language which the Firefox user interface is written in (as well as other apps from Mozilla). They've removed the ability to reference it directly from a web page due to security considerations.

This one issue shouldn't generally concern anyone -- if you'd been sticking to standards anyway, you'd never have used it.

However, there is one way in which it has been used quite widely: as a browser hack to get Firefox to support an ellipsis. All other browsers support CSS text-overflow:ellipsis;, but Firefox does not. Even FF4 won't support it. Someone managed to hack a way to do it using -moz-binding, and many sites have been using it since then. This hack will cease to work in FF4.

See my question on this topic here: text-overflow:ellipsis in Firefox 4? (and FF5)

But other than that one thing, pretty much everything else new in Firefox 4 - certainly from the perspective of the rendering engine -- is an incremental upgrade from FF3.6, so existing sites should continue to work unchanged.

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
1

You could run both versions in the same box, at least for testing.

http://www.thewindowsclub.com/how-to-run-firefox-3-and-firefox-4-simultaneously-in-windows

I guess you can't do this very effectively with other browsers. (like IE, or Chrome with auto-updates)

itsnotvalid
  • 245
  • 1
  • 2
  • 10
  • 1
    although not on topic, you can run multiple versions of IE with http://utilu.com/IECollection/ – jackJoe Mar 08 '11 at 18:59
0

The major differences between the two are going to be more along the lines of new elements, properties and APIs and not basic properties as you mention. Any smaller design or layout problems were solved long ago or, if one were to be fixed, probably rare. It's not like IE where there are issues not only between versions but within versions.

Rob
  • 14,746
  • 28
  • 47
  • 65
0

Regardless of what's been posted thus far, be careful because I've already noticed several differences in rendering -- specifically with vertical spacing and inline list elements. In my case, the difference is actually quite huge since this impacts the look of the top menu element. Previously IE8,Chrome10/11 and FF4 all rendered it identical, but now FF4 is a definite outlier. I am using the html5/html4-strict doctype too. Just something to consider; the transition isn't quite as rosy as the prior posts would perhaps lead you to believe...

Sean
  • 1