Browsers

I've already talked about browsers a couple of times before in this series, mentioning browsers introducing features like HTML tables, which got adopted by others and later merged back into standards, browsers transmitting abstruse user agent strings pretending to be someone else, browsers implementing different subsets of past and upcoming standards and so on. So not only due to the fact they are the direct gate to the user of a website, browsers are definitely worth and necessary taking a closer look at.


Some history: First there was NCSA Mosaic, the first graphical browser not associated with any CERN project. Its user interface obviously did something right and since it was available for a whole lot of platforms, including builds for Windows, it was a major driver of web population in 1993. But this lasted only about one year until Netscape Navigator arose and quickly took the momentum from Mosaic.

Netscape Navigator stayed the most popular browser until being overtaken itself by Microsoft Internet Explorer during 1998, initially released in late 1995. These two browsers' competition is often referred to as the first browser war. Some numbers on usage shares may be found at Wikipedia, but as you'll see those ancient numbers highly vary and must be handled with care. The fight was not only fought considering the user interface and its convenience features, but also adding own functions. For example, the Netscape Navigator introduced HTML tables, not available in IE 1.0, and frames. To not lose any users due to missing compatibility to websites using such new features, both browsers quickly adopted most of the new features the respective other one introduced, and consequently the features resulted in standards like HTML 3.2 and 4. Another popular example for such a feature is Netscape's JavaScript, released as LiveScript in 1995. Half a year after Netscape, Microsoft released an own implementation called JScript (for legal reasons) and Netscape succeeded with standardization as ECMAScript. Other examples for Netscape developments include SSL, which led to TLS and will be discussed when covering security.

As we all know, Netscape Navigator was "defeated" during this war and today is no more. At least considering its name. In fact, Netscape open sourced it's browser and established a community called Mozilla, the initial code name of the Navigator, included in every version string. The Mozilla Organization, later formalized as the Mozilla Foundation and the Mozilla Corporation, kept developing the Navigator under the name Mozilla and finally split it up into Firefox (initially Phoenix) and Thunderbird (initially Minotaur), everyone knows today. Since the Netscape Navigator and Microsoft's Internet Explorer were both based on Mosiac, this means two of the competitors of the currently ongoing second browser war, Firefox and Internet Explorer, are related to Mosaic, which has been started over two decades ago.

The other big competitors are based on a development only six years younger: In 1996, the open source KDE desktop project started developing an HTML rendering engine called KHTML, which later, together with the ECMAScript engine KJS, should power the KDE browser Konqueror first released in 2000. Two years later, stating them to be small, cleanly designed and standards compliant, Apple started a fork of those two engines called WebKit and created its Safari browser based on it. The exact same WebKit engine powers Google's Chrome and its open source variant Chromium from 2008. Obviously Google did something right, since Chrome is currently the first browser to overtake IE considering worldwide usage shares, a task Firefox could only achieve in some countries.

Though the big competitors of the ongoing second browser war, Internet Explorer, Firefox, Chrome and Safari make up nearly 97 % of the usage share, there are other players as well. One definitely worth mentioning is Opera. Although it has ever been around since the Mosaic age, it never reached 5 % of global usage shares and does not even hold 2 % today. Regardless of its little success, it's technically a really advanced browser. Opera has ever been an early adopter for new technologies like CSS and is highly standards compliant. Besides the desktop version Opera maintains a number of browsers for embedded and mobile environments. It's e. g. available for Nintendo's DS and Wii game consoles and Opera Mobile has been the most popular mobile browser until being overtaken by Safari lately. Other popular mobile browsers include the Android, Nokia and BlackBerry browsers, all based on WebKit. Of course, there are many more great pieces of browser software like the KDE browser Konqueror, already mentioned, the Gnome equivalent Galeon / Epiphany / Web, based on Gecko (Mozilla's rendering engine), Camino, a Gecko-based browser targeted especially at Mac OS X and many many more. You can find a nice little overview for ten (Safari) alternatives for Mac OS X over at appstorm. A comprehensive timeline of web browser is maintained at Wikipedia.

If you look at the rightmost end of that timeline, looking at the strings representing projects that are still maintained, you'll also see one thing called Lynx, which is actually the longest string in the complete chart, even starting before Mosaic. This is a text-based browser, which can be used on a terminal. Ancient, you think? Totally wrong. Below Lynx, you'll find a direct competitor called Links, started only in 1999, when Netscape Navigator was already facing its defeat. If you're running Linux or another UNIX(-like) operating system, you'll probably already have one of those installed (or maybe w3m, another popular competitor). I'm not sure, whether or not Mac OS X ships one, but they are all available for it, as well as for Windows. Give them a try! Those are great tools for testing the accessibility of a website (and being the top nerd when using it in company of course). No JavaScript, no images (just their alternative texts; there's a reason they're mandatory in modern HTML), no style sheets, just the plain content. This is exactly how machines like web crawlers and blind people "see" those sites.

So, what does this all mean for web development? We have three (four (five)) major browsers currently competing for users, browsers pre-defining standards, quite a fragmentation of different software and even versions. Sounds like a lot of work and it definitely is. This all gets worse when looking at the details and recent developments. A great service concerning browsers and browser versions is StatCounter. It lists the shares for browsers, browser versions, operating systems and much more worldwide and per country, dating back to 2008.

Looking at the charts, one can easily verify, that Google and Mozilla do a great job at auto-updating their browsers. You should only see two versions in the stats: The current and the previous ones (At the time writing, a few users still stick with a third Firefox version, 3.6, not auto-updating, I'll just ignore. Blame you, Mozilla!). This is great, since it means, considering those two browsers, you'll always be able to use the latest features. On the other hand, there are operating system vendors, not only not getting the point of auto-updates, which they could easily implement using their operating systems' mechanisms, but they also mistake their browsers as a sales argument for new OS versions. This means, Microsoft and Apple do not only support their browers' latest version, but Internet Explorer 6, 7, 8, 9 (and 10), as well as Safari 5.0, 5.1 (and 6.0) - and they need to, since they only do for certain versions of their own operating systems. Windows XP, shipped with Internet Explorer 6 is only able to run up to IE 8, and Windows Vista, shipped with IE 7, as well as Windows 7, shipped with IE 8, won't be able to run the final version of IE 10. *) And Safari 5.1 on the other side, is not available for the oldest yet supported version of Mac OS X, Leopard. Fortunately, users and developers are not that closed-minded. At least since Google and other big web services dropped support for IE 6, this one is not an issue anymore, and the shares of IE 7 are finally vanishing, too. But face it: IE 8 and Safari 5.0 won't disappear before users leave behind their respective operating systems Windows XP and Mac OS X Leopard and especially IE 8 is really a pain in the ass, if you want to make use of great new standards.

Another awkward detail is the old question of who's making the standards - the respective committee or those, who are to implement them. Especially the long lasting standardization process of HTML5 and the modularized CSS level 3 lead to confuse situations, where everybody wants to be the first to implement, but not anticipate the upcoming standards. The Evolution of the Web is a nice-looking chart for the adoption of recent technologies. The ideal keyword to illustrate the madness are so called vendor prefixes. Let's take CSS Transitions as an example, a CSS 3 module working draft. What's being standardized are five CSS properties, transition being one of them. Those are already implemented into all the major browsers, at least in some way, and since nobody can say whether or not they will be standard compliant and browser vendors do not want their implementations to change later on, the properties do not have the names defined in the draft, but are prefixed with vendor prefixes resulting in -moz-transition, -webkit-transition, -o-transition and -ms-transition. So if one would want to use this feature, the CSS would look like this:

transition: width 2s; /* wouldn't it be nice? */
-moz-transition: width 2s; /* Firefox */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
-ms-transition: width 2s; /* IE 10 */

Sweet, ha? Oh my... And to create even more confusion, Opera announced the support of WebKit vendor prefixes in their browser... As stated earlier in this series: Front-end development means heavy research, trial and error, debugging and starting all over. Don't forget about your users, robots and browser diversity. The browsers and browser versions to support is a major decision when starting something new. My recommendations: Do not struggle with ancient software, even if their vendor still supports it and there's a little usage share (i. e. just don't support IE 7 and especially not IE 6). Virtually nobody will notice. Have a thought about whether or not it's affordable to address users stuck with the native client of older operating systems (i. e. IE8@XP and Safari5@Leopard). And most importantly don't forget to take your actual audience into account. E. g. if you look at Ukraine, you'll notice Opera is the most popular desktop browser there and nobody cares about Safari, if the website offers some Mac accessory, don't expect too much IE users and so on. Lastly, if you made up your mind and put a "No IE support here! Go grab a working web browser!" banner in place, do no make the mistake to explicitly mention Firefox and Chrome (and Safari (and Opera)). Although your designer can do a really great job at making some nice looking screen out of their logos, it can hurt the feelings of really awesome people seeing and / or being part of the bigger picture.

Pre-processors and libraries for stylesheets and scripts, I've already mentioned in my posts on SASS, LESS and JavaScript are great tools to ease development of cross-compatible websites.

*) Update: Realizing users do not overly appreciate Windows 8, Microsoft announced a Windows 7 version of  IE 10.