Javascript Madness Intro

Javascript Madness: Layout Engines

Jan Wolter
Mar 30, 2011

In other pages in this series, I refer to most browser by their browser name ("Internet Explorer", "Opera", "Safari", "Konqueror") but instead of talking about "Firefox" I talk about "Gecko". This page is mainly here to explain that choice.

Layout Engines

From the Javascript programmers point of view, what tends to be most important is not which browser version is being used, but which layout engine version is being used. The layout engine is the part of the browser that actually interprets the the HTML and draws stuff on the screen. It handles the execution of Javascript code and provides the document object model and event models that the Javascript code interacts with. There are several different layout engines around, and most of them are used in many different browsers. Here's a few of the most widely used ones:

Layout EngineBrowser
Trident Internet Explorer for Windows
Netscape 8.1
Tasman Internet Explorer 5 for Macintosh
Gecko Firefox
Netscape 6 and later
Epiphany 2.20 and before
KHTML Konqueror
WebKit Safari
iCab 4 and later
Epiphany 2.26 and later
Maxthon 3
Presto Opera
iCab iCab 3 and before
Tkhtml Html Viewer


In writing articles about the behavior of different versions of different browsers, it's generally clearest to refer to the browser instead of the layout engine, as layout engines are much less well known. However, since there are several fairly common Mozilla browsers with different version numbering schemes, this gets a bit awkward. I could say that there are certain annoying layout bugs in Firefox 1.0, Mozilla 1.7, Netscape 7.2 and 8.1, Camino 0.8 and Epiphany 1.4 and 1.8. But I'd much rather say that there are certain annoying layout bugs in Gecko 1.7, which underlies all those browsers.

This goes beyond ease of expression. In many cases, the only way to write "portable" Javascript code is to sense the browser type by looking at the navigator.user_agent string, and running different code for different versions of different browsers. If you do this, what you want to look for with the Mozilla browsers is not the browser version number, but the Gecko version number. For example, the following user agent string is for "Firefox 1.5" but the Gecko version is 1.8:

   Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
If you write your code to pay attention to the Gecko version number, then you can handle all Gecko-based browsers as one case, instead of having separate cases for each different browser. So from a programmer's point of view, what matters is Gecko, not Firefox.

Do not be confused by browser strings like this:

   Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0) Gecko/20100101 Firefox/5.0
The "5.0" after "Mozilla" is meaningless and will probably never change. The "5.0" after "Firefox" is the browser version number. The "5.0" after "rv" is the Gecko version number. Starting with Firefox 5.0, the Firefox and Gecko version numbers are supposed to always be the same, but they weren't for older browsers and they aren't for other browsers using Gecko, so it is important to be looking at the right one.

All the Gecko-based browsers except Firefox seem to be steadily faging away, so this distinction seems to becoming moot, but now there are a lot of WebKit browsers, and the same rule applies -- for Safari, you want to parse out the AppleWebKit version number, not the Safari version number.

Gecko Versions

For readers interested in mapping Gecko version numbers refered to in these articles to actual browser versions, here is a rough guide:

Gecko version Mozilla Suite Firefox Netscape Camino K-Meleon Galeon Epiphany
Gecko 5.0 SeaMonkey 2.2 Firefox 5.0 - - - - -
Gecko 2.0 SeaMonkey 2.1 Firefox 4.0 - - - - -
Gecko 1.9 SeaMonkey 2.0 Firefox 3.5
Firefox 3.0
- Camino 2.0 K-Meleon 1.6 - -
Gecko 1.8 SeaMonkey 1.1
SeaMonkey 1.0
Firefox 2.0
Firefox 1.5
Netscape 9.0 Camino 1.x K-Meleon 1.5
K-Meleon 1.0
Galeon 2.0 Epiphany 2.x
Gecko 1.7 Mozilla 1.7 Firefox 1.0 Netscape 8.1
Netscape 8.0
Netscape 7.2
Camino 0.8 K-Meleon 0.9 Galeon 1.3.16
Galeon 1.2.14
Epiphany 1.8
Epiphany 1.4
Gecko 1.6 Mozilla 1.6 Firefox 0.8 - Camino 0.7+ - Galeon 1.3.12 Epiphany 1.2
Epiphany 1.0
Gecko 1.5 Mozilla 1.5 Firebird 0.6.1 - - K-Meleon 0.8 Galeon 1.3.10 -
Gecko 1.4 Mozilla 1.4 Firebird 0.6 Netscape 7.1 - - Galeon 1.3.6 Epiphany 0.9
Gecko 1.2 Mozilla 1.2 Firebird 0.1 - - K-Meleon 0.7 Galeon 1.2.7 -
Gecko 1.0 Mozilla 1.0 - Netscape 7.0 Camino 0.7
Chimera 0.6
Chimera 0.4
- Galeon 1.2.5 -
Gecko 0.9 Mozilla 0.9 - Netscape 6.2
Netscape 6.1
- K-Meleon 0.6
K-Meleon 0.4
Galeon 1.1
Galeon 1.0
Gecko 0.6 Mozilla 0.6 - Netscape 6.0 - K-Meleon 0.2 - -


It should be noted that there was a time when some of the Mozilla people denied that Gecko was named "Gecko". They say that that is term invented by Netscape's marketing department for the combination of the Mozilla "NGLayout" project (which was previously called "Raptor") and the Mozilla "XPFE" project. Which doesn't explain why the user agent strings in all Mozilla browsers say "Gecko". So to heck with them. It's "Gecko" whether they like it or not. Much better name anyway. Sometimes marketing departments are not wrong.

WebKit Versions

The WebKit rendering engine is growing rapidly in popularity, being used in more and more important browsers. I'm in the process of revising these pages to refer to "WebKit" instead of Safari, but there still seem to be a lot of subtle differences between WebKit browsers, and WebKit version numbers are really ugly. Still, since your programs really should be testing based on WebKit version numbers, not Safari version numbers, it probably makes sense to change over. Here is the approximate mapping between WebKit versions and browser versions:
WebKit VersionSafariChromeEphiphany
534.7-7.0.517 to 7.0.520-
534.3-6.0.456 to 6.0.472-
534.2-6.0.451 to 6.0.454-
534.1-6.0.414 to 6.0.428-
533.4-5.0.366 to 5.0.375-
533.3-5.0.353 to 5.0.363-
533.2-5.0.342 to 5.0.343-
532.9-5.0.307 to 5.0.310-
532.8-4.0.288 to 4.0.302-
532.5-4.0.246 to 4.0.249-
532.3-4.0.224 to 4.0.227-
532.2-4.0.221 to 4.0.223-
532.1-4.0.212 to 4.0.220-
532.0-3.0.195 to 4.0.211-
531.3-3.0.192 to 3.0.193-
531.2-3.0.1912.28 to 2,30
531.0-2.0.182 to 3.0.191-
530.8-2.0.177 to 2.0.178-
530.7-2.0.175 to 2.0.176-
530.5-2.0.172 to 2.0.173-
530.1-2.0.164 to 2.0.170-
530.0-2.0.160 to 2.0.162-
525. to 1.0.154-
I think most WebKit-based Macintosh browsers other than Safari (like iCab 4 and Shiira) will use whichever WebKit is installed with the Safari that is currently on your computer. Because of this, there is no consistant mapping between their versions and WebKit version numbers.

Actually, the mapping between Safari version numbers and WebKit versions numbers isn't all that rigid either. It is quite possible to have several WebKit versions installed on your computer simultaneously, and to tell whatever version of Safari you are using to use any one of them. However, only serious browser geeks do this, so you needn't worry about it.

Note that Apple and Google hardly ever release the exact same version of WebKit. It looks like Google tends to use young versions of the newest branch, while Apple uses more mature versions of an older branch. This is probably an artifact of their radically different release cycles. To some degree, Google may be doing Apple's beta testing.

Chrome version numbers are weird. They are like two independent version numbering schemes concatinated together. The first two numbers look like the marketing department's version numbers, what the version number would look like if their release cycle was as slow as Apple's. The last number just seems to steadily tick upward as new revisions are checked into the release build, entirely independently of the first two digits. I suspect that if you want to have your software check Chrome version numbers, then you should ignore the first two digits, and use only the third and forth digit.