Browsers and rendering

Popular browsers in use today like Mozilla FireFox, Google Chrome, Safari, Opera and Internet Explorer can all be customized as well as have plenty of add-ons available for them.

It is often experienced by webmasters and users alike that some web pages appear perfectly normal in some browsers while in others they are barely readable.

As a browser parses HTML code, it forms an internal tree that represents all elements to be displayed contained in the web page through rules, this is done internally in browser through a rendering engine and the whole process is called as rendering.

Web pages appear differently primarily because of CSS code and other rich UI scripts used in the making of the page.

Tips and tricks to avoid rendering issues

One solution to this problem faced by webmasters is to test the single page on multiple browsers by using a rendering engine that emulates the most popular browsers.

Other is to use compatible libraries like the ones used by Adobe Dreamweaver CS3 uses (BCC - Browser Compatibility Check) that helps in removing the cross browser rendering issues when CSS is used.

Using minimum components in a page and putting CSS in the <head> as per HTML directives also helps in minimizing rendering errors when multiple browsers are used.

Other CSS and HTML issues can cause rendering differently in different browsers. The common trick to resolve these rendering issues is to use a browser reset style sheet. What it does is reset the browser's CSS settings to a common default value set.

Some of the common browser reset style sheets can be found here:

Yahoo YUI browser reset.

Blueprint CSS framework.

Collection and comparison of various CSS browser resets.

Some of the best practices for optimizing browser rendering

Using efficient CSS selectors: This involves removing unused CSS rules so that the style engine can quickly find CSS matches without spending times to rules that don't apply. Example:

ul#top_red_nav {...}
form#UserDetails {...}

ID selectors are unique by definition. Including tag or class qualifiers just adds redundant information that needs to be evaluated needlessly like in the above example.

Avoid CSS expressions: If you are using CSS expressions for dynamic styling, it is ok to recode them as pure JavaScript to both improve performance in IE and get the benefit of supporting the same functionality in other browsers at the same time else avoid the expressions.

CSS placement in document head: Pointing external style sheets and inline style blocks in the body of an HTML document can negatively affect the browser's rendering performance. Browsers block rendering a web page until all external style sheets have been downloaded.

Inline style blocks (specified with the <style> tag) can cause reflows and shifting of content. Therefore, it's important to put references to external style sheets, as well as inline style blocks, in the head of the page. By ensuring that style sheets are downloaded and parsed first, you can allow the browser to progressively render the page.

Also Put <style> blocks in the <head> section.

Image dimensions: This involves specifying a width and height for all images which makes rendering fast.

When the browser lays out the page, it should be able to parse and flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around.

If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.

Hence overall as a best practice, it is always important to test and see how a web page looks like on various browsers before it is made live.

A brief look at the most commonly used browsers and their history:

Mozilla FireFox is one of the most popular browsers today with a very large user base as well as developer community supporting it, FireFox is a Gecko based browser(since version 1.5) - what this means is that it uses fast DOM and hence JavaScript is loaded only from disk cache or net.

Features offered by FireFox are: tabbed browsing, instant plug-in detection, private browsing, password manager and many more.

It is open source with very regular updates and a vast documentation base for web developers who want to leverage full power of Mozilla FireFox.

Mozilla FireFox started as an experiment by folks at Mozilla in order to create a standalone browser to replace the then available Mozilla Suite. It was initially named as Phoenix but later changed to FireFox and version 1.0 was released on November 9, 2004.

Opera pioneered many of the standard features present in today's web browsers. It handles most of the common Internet tasks and supports features like mouse gestures, page zooming, tabbed browsing and others. This too is offered free for use and is much more popular with mobile devices.

Opera too dates back when it started as a project at Telnor and branched out to different company named Opera Software ASA. It was released publicly as version 2.0 in 1996.

Internet Explorer (IE), the world's most used browser, comes bundled with every copy of Microsoft Windows and had a market share of as high as 95% in 2002-2003 before open source browsers like FireFox were developed.

Some unique features of IE are : web accelerators, web splicing, smart screen phishing filters and tabbed browsing.

IE has a long history going back to 1994 when the development started using source code of then available Mosaic browser. Version 1 was first released on August 16 1995.

Google Chrome is a newer browser compared to the above two and released as an open source project by Google. It is based on WebKit layout engine and application framework for its development.

The unique feature of Chrome is the emphasis on faster loading of web pages and minimal interface for better user experience.

Like most popular browsers above, Chrome too supports tabbed browsing, auto updates, and anti-phishing filter.

Chrome was designed to keep in considering web applications like Gmail and others where loading time is more important and for which DOM is used to the fullest. Version 1 was released by Google on 2 September 2008.

Safari by Apple is included by default with Mac OS but is now available for PC as well.

Common features include tabbed browsing, bookmark management, pop up ad blocking that is available in both PC and Mac version while others like saving webpage clips, using keychain for password management and iphoto viewing are available in Mac versions only.

The first version of Safari was released on January 7 2003 by Apple.

Popularity of browsers

According to Net Analytics which deals in tracking usage and market shares for browsers and operating systems, as of June 2010, IE has the highest share on the market.

The full report can be found here.

Broswer Popularity
Internet Explorer 60.32%
Mozilla FireFox 23.81%
Google Chrome 7.24%
Apple Safari 4.85%
Opera 2.27%

Download HTTP Debugger



Copyright Notice: No part of this article may be reproduced, translated, stored in a retrieval system, or transmitted in any form or by any means without prior written permission from the HTTPDebugger.com

Read more articles    |    Send your feedback about this article