From the Journal
Jun 22nd
Thank You Alan Turing
June 23rd will mark the 100th anniversary of the life of famous English mathematician Alan Turing.
Quick Tip: Using Conditional Comments And CSS
I often find myself trying to get Internet Explorer’s various versions to behave correctly in my websites. Unfortunately, Internet Explorer isn’t the sort of browser you can just ignore and hope those users upgrade to something more standards complaint, like Firefox or Opera. So, what’s the easiest way to make sure users on Internet Explorer see your site as intended?
I’ve found that using conditional comments with separate style sheets works the best for me. Sure, it’s a rough-and-tumble solution to be sure, but it works when I’m in a crunch and I need to get a project done. And really, it’s not that bad of a method to use which, I imagine, is one of the reasons for the version targeting in the upcoming Internet Explorer releases.
How do you use conditional comments with separate style sheets?
Well, I’ll show you. Let’s say you’ve noticed some display issues with a new CSS-based design in Internet Explorer. No surprise there, right? You isolated the problem and created a hack to get it working in IE, but you’d rather not clutter up your default style sheet with all this mucked-up styling, so you create a separate style sheet to house these changes. An added benefit of this method is that you can overwrite default style sheets with these new styles to make Internet Explorer behave. Here’s how.
Setup your style sheet link as normal.
<html>
<head>
<title>Wicked awesome page title</title>
<link rel="stylesheet" href="/stylesheets/default.css" type="text/css" />
</head>
<body>
<p>Some information ...</p>
</body>
</html>
Then, add the conditional comment for Internet Explorer 6.0
<html>
<head>
<title>Wicked awesome page title</title>
<link rel="stylesheet" href="/stylesheets/default.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="/stylesheets/ie6.css" type="text/css" />
<![endif]-->
</head>
<body>
<p>Some information ...</p>
</body>
</html>
And presto! You’ve got a style sheet that will only get used in Internet Explorer 6.0. What about all the other versions? The 7th version of Internet Explorer helped to improve the browsers understanding of CSS and web standards, so some of the same old issues with Internet Explorer don’t really come up. What if you wanted to load a style sheet that worked for all versions lower than 7?
For that you’d do something like this:
<html>
<head>
<title>Wicked awesome page title</title>
<link rel="stylesheet" href="/stylesheets/default.css" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" href="/stylesheets/ie6.css" type="text/css" />
<![endif]-->
</head>
<body>
<p>Some information ...</p>
</body>
</html>
The ‘lt’ just means “less than”, and will target any versions less than 7, and load up the style sheet accordingly. Additional syntax are: ‘gt’ for “greater than” and ‘gte’ / ‘lte’ for “greater / less than or equal to”. This trick can apply to anything you want to show in Internet Explorer but not other browsers, such as, messages explaining to users that they are using a version of Internet Explorer that may not be suited well for the website they are currently viewing and may notice some display issues.
I’d use the conditional comment sparingly, but if you’re in a deadline situation and don’t have time to find a legitimate CSS fix for the problem, I’m all for using this trick to get the job done.
By the way, you can also use this technique to hide/show content from a particular Internet Explorer version. Perhaps a “You are currently using Internet Explorer 6. Though not necessary to use this website, if you’d like to upgrade your browser we’d be able to enhance your experience while you’re here.” message for IE6 users?
UPDATE: As a side note, if you use conditional comments in your markup it will still validate. Conditional comments are actually valid markup, so don’t worry if you like to make sure all your code validates.
