Tutorial: Page (1) of 1 - 04/12/06 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Revisiting "Bad" CSS, Part 1

The power of IE (once again) compels you By Kevin Schmitt

'Round about Thanksgiving time last year (late November for those outside the U.S.), I wrote a piece on how to use non-standard ("bad") CSS to present different content to different browsers. Now, with IE 7 threatening to be unleashed on an unsuspecting public, it's high time to revisit the basic concept and see if we can't clean it up a bit. In part 1 (of 2), we'll be setting up an example and going through what IE conditionals are, which will ultimately make designing sites for IE a little less messy once IE 7 gets thrown into the mix.

Slouching towards Bethlehem

It's probably not news to all you Web designers and developers out there that IE 7 is coming at some point this year (Probably? Maybe?), but it's never too early to get yourself up to speed. Microsoft recently released Beta 2 of IE 7 for Windows XP SP2, the layout engine for which is apparently final, so at the very least you should be finding a way to test your sites (either live ones or those still in development) in IE 7. Speaking for myself, there are some minor issues IE 7 has with a couple of sites I've done, but I'm relieved to report that the comma trick for IE-only CSS (outlined in the original article) seems to work just fine in IE 7. However, IE 7 is much better at rendering CSS than its predecessors, so there's a good chance that you'll come across pages that look just a little different in IE 7 than they do in IE 6. Therefore, you may have occasion to need multiple styles for the same page elements in different versions of IE. Isn't designing for the Web fun? The comma trick won't help there, but there is a solution?it's not exactly new, but it will certainly suffice for serving up different CSS pages to different browsers, with the added bonus of allowing us to clean out the "bad" (read: hacked) CSS while we're at it.

IE-friendly CSS

OK, let me set up a scenario here for you. Much like we did in the original piece, we're going to create a simple box that displays different images and colors depending on the browser used to view it. The way we're going to work it this time, though, is not to by using the comma or pound tricks, but by creating separate styles for IE and non-IE browsers and then "activating" them through the use of IE conditionals. Makes perfect sense, right? Here's an illustration of what I mean?Figure 1 is simply a couple of nested DIVs with different styles applied to them:

Figure 1: This is not IE

The catch here is that all Figure 1s are not created equal, so here's the breakdown of what you should be seeing:

  • Modern non-IE browsers (like Safari, Firefox, and Opera): Red box, crossed out older IE logo, caption reading "This is not IE" (fig. 2, far left)
  • IE 7 Beta 2: Yellow box, new IE 7 logo, caption reading "This is IE" (fig. 2, center left)
  • IE 6: Orange box, older IE logo, caption reading "This is IE" (fig. 2, center right)
  • IE 5/5.5: Gray box, older IE logo, caption reading "This is IE" (fig. 2, right)


Figure 2

Heaven forbid you're using a version of IE lower than 5; I have no idea what you're seeing if that's the case (though I suspect you get freaky results as a matter of course). Anyway, Figure 1 is constructed with IE conditionals, which allows you to effectively route code to different versions of IE.

The IE conditional

Fortunately, writing IE conditionals is about as simple as it gets. Consider the following piece of code:

<!--[if IE]>
    This is IE
<![endif]-->

Doesn't look too different than regular ol' HTML, does it? All that example does is pass a piece of text to IE browsers, much the same way the caption appeared in Figure 1. If you break it down a bit, you've got your comment tags so non-IE browsers will ignore it, and then a custom "if" call that IE is designed to sniff for. The syntax is also very simple. The example I just gave you ([if IE]) is sort of the "blanket statement" for passing something to any version of IE (5 and up, since conditionals aren't supported in IE4 or earlier). You can also use conditionals to target specific versions of IE. Let's do a few examples. Say I wanted to pass something only to IE 7:

<!--[if IE 7]>
    Hello, IE 7
<![endif]-->

Note the version number in there? Now, let's say I wanted to pass something to any version of IE over 6:

<!--[if gte IE 6]>
    Hello, IE 6 and above
<![endif]-->

See the gte in there? That tells IE to target versions of IE greater than or equal to version 6.

Of course, that's not all. There's also lte (less than or equal to), which could be used like this:

<!--[if lte IE 6]>
    Hello, IE 6 and below
<![endif]-->

Then we've got gt (greater than):

<!--[if gt IE 6]>
    Hello, IE 7
<![endif]-->

And last, but not least, lt (less than):

<!--[if lt IE 6]>
    Hello, IE 5 and 5.5
<![endif]-->

One thing that may have dawned on you in looking over that smorgasbord of code is that different modifiers could conceivably be used to do exactly the same thing. For example, lte could be used interchangeably with lt and a specific version number, so this:

<!--[if lte IE 6]>
    Hello, IE 6 and earlier
<![endif]-->

...would be the same as:

<!--[if lt IE 7]>
    Hello, IE 6 and earlier
<![endif]-->

Of course, there are caveats, like being careful when using gt and gte to call out specific version numbers (since IE 7 may not be where Microsoft stops and gives up), but I assume you get the idea. In a nutshell, between the modifiers and the version numbering, you have quite a few targeting combinations at your disposal.

Pouring the foundation

Now that we've got some background on IE conditionals, let's turn back to the project at hand and set up a few things before we call it a day. First, the basic HTML code. In your favorite text editor or Web page building app, start a new HTML document and enter the following between the <body></body> tags:

<p>
    <div id="box">
        <div id="boximg"></div>
    </div>
    <b>Figure 1:</b> <span class="notie">This is not IE</span><!--[if IE]>This is IE<![endif]-->
</p>

What we have here is set of two DIVs, the second of which (boximg) is nested inside the first (box). The DIVs are wrapped in a paragraph tag, and I've also set up the code for the text captions below the box. With that out of the way, let's take inventory of the images we're going to need. First, the old IE logo (fig. 3):


Figure 3

Next, the new IE 7 logo (fig. 4):


Figure 4

And finally, the red "x" image (fig. 5):


Figure 5

Now, these are all transparent PNG files, so if you're browsing with any version of IE lower than 7, you'll see gray backgrounds instead of the background color of the page showing through. Such is life. Anyway, we've put down the appropriate groundwork to start using IE conditionals, so that's a good stopping point for today. We'll pick this up in the very near future and go over how the code comes together, so be sure to tune in then!


Page: 1


Though the fame, riches, and notoriety of being a DMN contributor are both tantalizing and substantial, Kevin Schmitt still stubbornly insists on continuing his work as the Director of Interactive Services at EFX Media, a production house located just outside of Washington, D.C. Feel free to follow his updates and contact him through Twitter if you have something to share - he's ready to believe you!
Related Keywords:css, web design, web development, internet explorer

HOT THREADS on DMN Forums
Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved