• Choose a category
• All
• Classic-Fiction

By Root 1475 0

You might be tempted to create two versions of your page, one for IE and one for the standards-compliant browsers (Firefox, Netscape Navigator, Opera, Safari, and so on). This is also a bad solution because it’s twice (or more) as much work. You’ll have a lot of trouble keeping track of changes in two different pages. They’ll inevitably fall out of synch.

♦ JavaScript-based browser detection: In Book IV, you see that JavaScript has features for checking on the browser. This is good, but it still doesn’t quite handle the differences in style sheet implementation between the browsers.

♦ CSS hacks: The CSS community has frequently relied on a series of hacks (unofficial workarounds) to handle CSS compatibility problems. This approach works by exploiting certain flaws in IE to overcome others. The biggest problem with this is that when Microsoft fixes some flaws (as they’ve done with IE 7), many of the flaws you relied on to fix a problem may be gone, but the original problem is still there.

♦ Conditional comments: Although IE has bugs, it also has some innovative features. One of these features, conditional comments, lets you write code that displays only in IE. Because the other browsers don’t support this feature, the IE-specific code is ignored in any browser not based on IE. This is the technique currently preferred by coders who adhere to Web standards.

Making Internet Explorer–specific code

It’s a little easier for you to see how conditional comments work if I show you a simple example and then show you how to use the conditional comment trick to fix CSS incompatibility problems.

Figure 5-5 shows a simple page with Firefox. Figure 5-6 shows the exact same page displayed in IE 7.

Figure 5-5: This isn’t IE.

Figure 5-6: And this is IE. Somehow the code knows the difference.

Take a look at the code for whatBrowser.html and see how it works.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

I will now use a conditional comment to determine your

browser. I’ll let you know if you’re using IE.

The only part that’s new is the strange comments:

Conditional comments are a special feature available only in Internet Explorer. They allow you to apply a test to your browser. You can place any XHTML code you wish between , but that code will only be rendered by versions of Internet Explorer. Any other browser will read the entire block as a comment and ignore it completely.

So, when you look at whatBrowser in IE, it sees the conditional comment, says to itself, “Why yes, I’m Internet Explorer,” and displays the “Using IE” headline. If you look at the same page with Firefox, the browser doesn’t understand the conditional comment but sees an HTML comment (which begins with ). HTML comments are ignored, so the browser does nothing.

Using a conditional comment with CSS

Conditional comments on their own aren’t that interesting, but they can be a very useful tool for creating compatible CSS. You can use conditional comments to create two different style sheets, one that works for IE and one that works with everything else. Figures 5-7 and 5-8 illustrate a simple example of this technique:

Figure 5-7: This page has a yellow background in most browsers.

Most browsers will read a standard style sheet that creates a yellow background.

Figure 5-8: The same page uses a different style sheet in IE.

If the page is rendered in IE, it uses a second style sheet.

Look at the code, and you’ll see it’s very similar to the IEorNot.html page.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd