• 20 hours
  • Easy

Free online content available in this course.


Got it!

Last updated on 11/12/18

Managing the compatibility between browsers

Log in or subscribe for free to enjoy all this course has to offer!

Here's the scenario: you're working hard on the design of your website. You're spend time on it, taking care over it and in the end you're quite pleased with yourself. You have a friend test the website and, there, he replies: "I have to say that it doesn't look that great".

Either you and your friend have completely different tastes, or the website looks nice at your end, but not at his end. Indeed, browsers don't have exactly the same rendering, even if they try to follow the same HTML and CSS rules. The older the browser, the more likely it will be that it won't understand the features you're using.

Rather than panic, you can, in this chapter, find out about a few ways to learn how to manage these differences between browsers... and obtain the best possible results regardless of the browser.

Conditional comments

It's often the older versions of Internet Explorer that will cause you problems. As some of them are still in use, you have to learn how to deal with them.

Conditional comments syntax

Fortunately, there's a very convenient way of adapting your code to older versions of Internet Explorer. Through conditional comments, you can ensure that a portion of your HTML code is only read by certain versions of IE. These are HTML comments that have a rather special form and will only be read by IE.

<!--[if IE]>
HTML code reserved for IE

The set forms an HTML comment and starts with <!-- and ends with -->. Browers thus ignore this code located inside… except IE, which interprets it as a [if IE] condition meaning "If it's Internet Explorer".

The advantage is that this technique allows you to target various versions of Internet Explorer. For example:

<!--[if IE8]>

… will only target Internet Explorer 8.

The following symbols can be used to target a set of versions:

  • lt: less than;

  • lte: less than or equal to;

  • gt: greater than;

  • gte: greater than or equal to.


<!--[if lte IE8]>

… means "All versions of Internet Explorer less than or equal to IE8" (in other words, IE8, IE7, IE6…).
On the other hand, browsers other than Internet Explorer can be targeted using the following syntax:

<!--[if !IE]><!-->
HTML code for various other browsers

Although the syntax looks a bit complex, the workaround is well designed. If you look closely, there are two comment tags. As the HTML code is located outside the comment tags, it will be read by all browsers... except IE, which reads the comments asking it not to read the HTML following on.

Usefulness of conditional comments

What are conditional comments used for?

You can use conditional comments to display a message intended for older versions of Internet Explorer: "Caution, you are browsing with a very old browser, please update it...".

It is primarily used, however, to load special style sheets for IE:

<!--[if lte IE8]>
<link rel="stylesheet" href="style_ie.css" />

The style_ie.css style sheet will, in this case, be read only by versions of IE not higher than IE8. You can "adapt" the CSS code inside to ensure that the website is displayed as well as it can be on these browsers. It's up to you to change the size of items, if necessary, or use other more suitable positioning methods, etc.

However, as there are several versions of Internet Explorer in circulation (IE6, IE7, IE8, IE9, etc.), one style sheet is not enough. You will sometimes want to make a change only for IE6 and IE7, other times only for IE6, and occasionally for IE8 and IE9... The only solution is to create a style sheet for each version. But this will make for a lot of .css files to be managed.

The solution now commonly used by experienced webmasters is to assign a class name to the <body> tag encompassing the page body. The class name will indicate the name of the IE version corresponding to the browser, in the .css file. In this case, just one CSS file is enough. For example, if you write:

<body class="ie8">

... IE8 will be specified as the browser in the CSS file. We can enter the following in the CSS file:

.ie8 nav
/* Change the style of the nav tag for IE8 */

With conditional comments, you can write several versions of the <body> tag according to the browser:

<!--[if IE6]><body class="ie6 old_ie"><![endif]-->
<!--[if IE7]><body class="ie7 old_ie"><![endif]-->
<!--[if IE8]><body class="ie8"><![endif]-->
<!--[if IE9]><body class="ie9"><![endif]-->
<!--[if !IE]><!--><body><!--<![endif]-->

CSS hacks

"Hacks" are workarounds to allow CSS properties to be read by certain versions of Internet Explorer only. The principle is the same as for conditional comments, but is less "above board": hacks are based on errors in these browsers, caused by them reading CSS properties when they should not.

Here's one of the best known hacks:

margin: 15px; /* For other browsers */
ma\rgin: 20px; /* For IE6 and IE7 */

A bug in IE6 and IE7 makes them read the second property. Normally, the backslash (\) in the middle of the property name makes it invalid, but these browsers ignore the backslash and read the property as if everything was normal.

Other hacks exist including, for example:

margin: 15px; /* For other browsers */
*margin: 20px; /* For IE6 and IE7 */
_margin: 20px; /* For IE6 */

An asterisk before the property name makes all browsers, except IE6 and IE7, ignore the line. Similarly, including an underscore (_) causes the line to be ignored by all browsers, except IE6.

Debugging tools

Your page is sometimes not displayed as you want it to be, even in a newer browser. In this case, you have to look for the error you've made. While several techniques are available, I'll just show you the ones I use most often.

Using the background color to mark items

The simplest technique for debugging is simply... to give a background color to an item that's not behaving the way you want it to (for example, a menu which is wrongly positioned). So it's as simple as that:

background-color: blue;

This very showy background color is temporary: you use it just to see where your item is "positioned". This often allows you to understand what's happening in your page.

If this technique's not enough, however, we have to bring out the big guns: a debugging tool.

Debugging tools

These are very powerful (and quite impressive) tools that let you interact with the web page directly in the browser. Most current browsers are provided with these tools, specially designed for the web developers that we are:

  • Google Chrome: go to the menu Adjustable wrench > Tools > Debugging tools (figure below). You can also right-click an item in your page, then click Inspect the item.

  • Mozilla Firefox: install the extension Firebug. A button will appear at the top or bottom right of the window (depending on the browser version) to open the debugging pane.

  • Internet Explorer: go to the menu Cog wheel > Development tools (available from IE8 and higher).

  • Opera: you can run its very powerful Dragonfly debugging tool by pressing Ctrl + Shift + I. You can also right-click an item in your page, then click Inspect the item.

Google Chrome debugging tool (at the bottom of the browser)
Google Chrome debugging tool (at the bottom of the browser)

There are several ways to use these tools. You can examine the hierarchy of your tags by displaying the source code (at the bottom left in the figure below) and edit your page's code in real time: double-click on a text or on a tag to be edited, and you'll see the result change in the browser window as you go! A word of caution, however: your changes are not saved, as you're only doing a simple test to understand the browser's behavior.

The list of CSS properties that apply to the currently selected item in the source code at shown at the bottom right. You can add to, remove or change its properties, etc. All the changes are applied immediately. Note that the CSS properties that are overwritten by other properties are struck through or grayed out: this allows you to understand how your style sheet behaves.

Finally, to directly target an item in your page, you can right-click on the item to be analyzed, and then click Inspect the item. The debugging toolbar also provides a button to target an item (a magnifying glass in Google Chrome, a cursor in IE, etc.).

This course stops here! Think of consulting all the appendices if you haven't done it yet, you will discover new leads to keep up your learning of HTML and CSS! ;)

Example of certificate of achievement
Example of certificate of achievement