Cross-Browser Compatibility Tips (Part 1)

by Ali Gajani | Mar 15, 2013

This is Part 1 of the Coding for different browsers series where we will discuss the different methodologies and tools to make the user experience for your customers as seamless as possible. In Part 1, we are going to discuss the various techniques used to render your site as you expect on multiple browsers. In Part 2, we will look at the tools that you can use for cross browser compatibility.

What is Cross-Browser Compatibility

If you are an avid web developer, you must have faced the problem of your website showing up differently on IE, Chrome, Firefox, Safari and Opera. You have, right? Well, you aren’t alone. This, in the developer community, is quite an infamous phenomenon, much to the anguish of web developers worldwide. But technically speaking, why does it happen? The answer is browser-rending engines. Here is a short list of the respective engines used by the most popular browsers.

• Firefox and other Mozilla browsers (IceWeasel, etc.) use Gecko.
• Internet Explorer uses Trident.
• Safari, Google Chrome and Konqueror use Webkit.
• Opera 9+ uses Presto, although recently Opera switched to Webkit as well.

Going into the history of why there are different engines for each browser is a non-trivial task and beyond the scope of this article. However, by now you do know what engines power web browsers and you are also aware of their differences.

How to solve compatibility issues

To ensure that your web content serves up in as similar a way as possible across multiple browsers and devices can take some work. The techniques available to the front-end web developer are listed below:

• Serving multiple stylesheets to various browsers and devices
• Serving specialized CSS code targeting specific browsers
• Using a framework like Foundation or Bootstrap

Let us discuss these in further detail.

Multiple Stylesheets

The easiest technique, and probably the most logical, is to serve up different stylesheets to the target browsers. Since Internet Explorer is the most problematic, one can resort to using conditional statements. The use of conditional statements is only effective for IE browsers and can be handy when targeting a specific layout. For example, to load a special .css file if the browser is IE 6, you can use the following conditional statement.

<!--[if IE 6]>

<link rel="stylesheet"  href="ie6.css" type="text/css" />

<![endif]-->

This would simply detect the IE version and if the condition is satisfied, it loads up the respective .css stylesheet.

Special CSS Code

But that is for IE, what about other browsers? Well, then you can always write a little bit of extra CSS code. For example, if you have ever wanted to apply a border radius to a box using CSS, you would simply write the code as below.

border-radius: 5px;

At present, the latest versions of Opera, Safari and Chrome support this CSS property natively. This means you don’t have to do anything else to allow a border radius to render properly.

In the future, as older versions go obsolete and the newer versions adopt the W3C specifications fully, things will look easier.  However, at the moment, you would have to write an extra bit of code to make things like border-radius work properly across all browsers. You would rewrite the CSS code as below.

border-radius: 5px;

(normal)

-webkit-border-radius: 5px;

(Chrome, Safari and soon Opera as well)

-moz-border-radius: 5px;

(Firefox)

-ms-border-radius: 5px;

(IE)

-o-border-radius: 5px;

(Opera)
Obviously, the use of these prefixes is only as a backup in case your user is using an old browser, or one that doesn’t properly support the simple shorthand CSS natively. It is always good to write a bit of extra CSS code (unless you don’t care about your user experience, in which case you can just simply ignore using prefixes).

By the way, a good resource for automatically creating border radius can be found here.

Use of Frameworks

The popular use of CSS frameworks like ZURB Foundation 3 and Twitter Bootstrap have made it possible to do many things while the cross-browser compatible CSS is taken care of for you.

For example, if you are using Twitter Bootstrap, and have been curious enough to inspect the core bootstrap.css stylesheet, you will find approximately 6,000 lines of pure CSS code.  If you delve in deeper and look at the style code in detail, you will find how they use multiple tricks and techniques to make sure Bootstrap is the most cross browser CSS framework on the planet (believe me, it is).

In Part 2, we will look at the tools you can use to make your site cross browser compatible. Stay tuned.

Meanwhile, learn more about CSS compatibilty and how to tune HTML5 for different browsers.