How to Manage Browser Incompatibility for HTML5 and CSS3 Programming

Although all the modern browsers manage CSS3 pretty well these days, Internet Explorer (especially the earlier versions) is well known for doing things in non-standard ways. Here are a few tricks to help you deal with the incompatibility.

How to make Internet Explorer–specific code

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

Here is a simple page with Firefox.

image0.jpg

Here it is displayed in IE 7.

image1.jpg

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

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>IEorNot.html</title>
 </head>
 <body>
 <p>
  I will now use a conditional comment to determine your
  browser. I’ll let you know if you're using IE.
 </p>
 <!--[if IE]>
  <h1>You're using IE</h1>
 <![endif]→
 </body>
</html>

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

 <!--[if IE]>
  <h1>You're using IE</h1>
 <![endif]→

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 HTML code you wish between <!-- [if IE]> and <![endif]→, but that code is rendered only by versions of Internet Explorer. Any other browser reads the entire block as a comment and ignores 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 <!-- and ends with ). HTML comments are ignored, so the browser does nothing.

How to use 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.

image2.jpg

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

image3.jpg

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.

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>WhatBrowser.html</title>
 <!-- default style →
 <style type = "text/css">
  body {
  background-color: yellow;
  color: blue;
  }
 </style>
 <!-- IE only style overrides default →
 <!--[if IE]>
  <style type = "text/css">
  body {
   background-color: red;
   color: yellow;
  }
  </style>
 <![endif]→
 </head>
 <body>
 <p>
  This page has a red background in IE, and a yellow
  background in other browsers.
 </p>
 </body>
</html>

If you want a page to use different styles in IE and other browsers, do the following:

  1. Define the default style first.

    Begin by creating the style that will work in most browsers. Most of the time, this style will also work in IE. You can create the style at the page level (with the <style></style> pair) or externally (with the <link> tag).

  2. Create a conditional comment in the header.

    Create a conditional comment after the primary style, as shown in this code snippet.

     <!-- default style →
     <style type = "text/css">
      body {
      background-color: yellow;
      color: blue;
      }
     </style>
     <!-- IE only style overrides default →
     <!--[if IE]>
     <![endif]→
  3. Build a new IE-specific style inside the comment.

    The style inside the comment will be applied only to IE browsers, such as in the following lines:

     <!--[if IE]>
      <style type = "text/css">
      body {
       background-color: red;
       color: yellow;
      }
      </style>
     <![endif]→
  4. The commented style can be page level or external.

    Like the default style, you can use the <style></style> pair to make a page-level style, or you can use the <link> tag to pull in an externally defined style sheet.

  5. Only place code that solves IE issues in the conditional style.

    IE will read the code in both styles, so there’s no need to repeat everything. Use the conditional style for only those areas where IE doesn’t do what you expect.

  6. Don’t forget to end the conditional comment.

    If you leave off the end of your conditional comment, most of your page won’t appear. That could be bad.

Checking the Internet Explorer version

You can specify which version of IE you’re using. This is important with positionable CSS because IE versions 7 and later work pretty well with standards-compliant code, but the earlier versions do not. You can use this variation to specify code only for IE 6 and earlier.

<!--[if lte IE 6]>
...
<[endif]→

How to use a CSS reset

Even when browsers agree on which CSS elements to incorporate, they sometimes differ on the actual details. For example, they may choose different margins and paddings for list elements. web developers often use a special CSS style called a css reset.

This is simply an external CSS file that explicitly determines the details of every single element. When you use a CSS reset, you're less likely to be surprised by differences between browsers. A number of great resets are available to use for free from cssreset.com.

Although page resets are a godsend for designers, they do slow down the page load and rendering time a bit. You should never use a page reset as the only CSS, but modify it to suit your specific needs. Also, you'll find that resets aren't critical until you're concerned that things work exactly the same on every browser.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.