Since the release of the World Wide Web, there has always been competition for dominance in usage share in the browser marketplace. By 2001, Internet Explorer controlled over 90 percent of the browser market after Netscape ceased to be a major contender, but with the release of Version 1.0 of Mozilla Firefox in November 2004 and Google Chrome in September 2008, it began to see a new crop of competition.
As of June 2012 however, Google Chrome has become the most used browser at just 32.76 percent market share. It now shares an ever crowded space with Mozilla Firefox, Internet Explorer, Safari, and Opera including mobile counterparts. In addition, each one of these has its own list of versions, and we need to decide in some cases from which version we require support for our applications after knowing that newer versions are always around the corner.
Let's peek behind the scenes a bit to understand the complexity behind the diversity of browsers and versions. Each browser has two major software components: a rendering engine and a JavaScript engine.
Also known as the layout engine or web browser engine, the rendering engine is responsible for parsing the markup content (HTML) and the style information (CSS, XSL, and so on), and generating a visual presentation of the formatted content including media files referenced (images, audio, video, fonts, and so on). It is important to know the many rendering engines out there because it can help you to recognize certain behaviors and deduce which browsers are going to behave in certain ways based on their rendering engine.
While Chrome and Safari use WebKit (developed by Apple, KDE, Nokia, Google, and others), Firefox uses Gecko (developed by Netscape/Mozilla Foundation), Internet Explorer uses Trident (owned by Microsoft), and Opera uses Presto.
With CSS, one can identify some exclusive rendering engine features (known as CSS extensions) by the prefix. WebKit-only features start with -webkit- and Gecko-only features with -moz-. Opera includes the -o- prefix while Internet Explorer 8 and up recognize -ms-.
Trident has a different approach. It recognizes common CSS properties with * or – as a prefix to override previous definitions (for example, *color:#ccc; and _color:#ccc; are not recognized by other rendering engines except Trident).
The JavaScript engine is the software component that interprets and executes JavaScript code in the browser. While the rendering engine is responsible for the visual presentation of HTML content using CSS styles, the JavaScript engine will interpret and execute JavaScript code.
Chrome employs the V8 engine, Firefox now uses Jägermonkey, Internet Explorer 9 features Chakra, Safari uses Nitro, while Opera substituted SunSpider with Carakan in 2010.
Note
The rankings for what many consider the current browser war are largely driven by the speed of the JavaScript engine. While other engines rely on interpretation and compilation, V8 has no intermediate parser and it generates an assembler using its own runtime environment. In other words, it has a virtual machine. This has allowed Chrome to become one of the fastest browsers.
As a general rule (there are some exceptions), it is better to load HTML and CSS first and then JavaScript. This can be done by including the <script> tags that import JavaScript just before closing the <body> tag. The reason for this is that it is faster to render HTML and CSS than to interpret and execute JavaScript. Web pages will appear to load faster as a result.
Where it is not possible to include the <script> tags in the body, there are two attributes on the <script> tag that can be used to signal to the browser when the script should be downloaded. These are async, which was introduced in HTML5, and defer. The defer attribute literally does what it purports; it defers script execution until the page has been rendered. This way, the DOM is ready for your script. The async attribute signals to the browser to download the script asynchronously and without blocking the rendering engine and executes it when it is ready. Both execute before the DOMContentLoaded event. The key difference is that defer executes each script sequentially and async executes each script when it is ready. Typically, in order to support older browsers that do not support the async attribute, these attributes are used together so that browsers that do not perform asynchronously can fall back to defer.
While there are many differences between browsers, it is important to be aware that inside the same browser category exists multiple versions whose HTML5 and CSS3 support vary widely. This is especially true for Internet Explorer. Proper support for HTML5 and CSS3 does not appear until Internet Explorer 9.
Note
Microsoft has started a campaign to deprecate and reduce the market share of Internet Explorer 6 worldwide. See http://www.ie6countdown.com for more details. The Aten Design Group took this to another level by commemorating the IE6 funeral at http:///www.ie6funeral.com.
Most of the HTML5 and CSS3 capabilities are supported in the following browsers and versions:
Internet Explorer 9 and higher
Firefox 7 and higher
Chrome 14 and higher
Safari 5 and higher
Safari Mobile 3.2 and higher
Opera 11 and higher
Opera Mobile 5 and higher
Even so, there are still some features not supported and there are inconsistencies between the implementations. One interesting case study that reveals the lack of standards across the browsers is the use of video in HTML5. To use the native video capabilities of HTML5, the video file must be compressed using specific codecs. There are three major codecs that exist: Ogg Theora (royalty-free), H.264 (free for end consumer but involves royalties for products that encode and decode), and WebM (royalty-free). As Firefox is oriented to use open source technologies, it initially supported only Ogg and WebM. Chrome currently supports all three codecs, but, for similar reasons as Firefox support for H.264, will be removed in subsequent versions (although it may continue support on mobile). Safari, Safari Mobile, and Internet Explorer 9 and higher support only H.264 by default, but you can install plugins to support Ogg and WebM (except on Safari Mobile).