October 20, 2006

IE Conditional Comment Update

October 20, 2006, 12:53 PM | 2 Comments

Well, with Internet Explorer 7 now released to the public, I thought I’d post a short update to a post I wrote back in May about Serving Up IE Specific Stylesheets.

IE 7 is better than IE 6 as it should be; it only took Microsoft 5 years between releases and a lot of things have changed since then. From a developer’s standpoint though, IE 7 is significantly better with its CSS support. Transparent PNGs are in, dotted 1 pixel borders are actually dotted (as opposed to dashed), the “double-float margin bug” is history, the :hover pseudo-class is supported across the board, etc. etc. etc.

There are a few little bugs remaining from the IE 6 days and I’m sure there are going to be several new ones that surface as people get more and more familiar with IE 7. If you’re familiar with conditional comments than you’ll most likely know that the best way to get around the specific layout problems that IE presents is to avoid using browser specific hacks in your CSS and to serve those offending browsers their own stylesheets instead.

So, IE 7 is now going to require a separate set of rules to fix things, and I thought I’d post the code to serve up a stylesheet for specifically IE 7. Here’s the code:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="YOUR_IE_7_STYLESHEET.css" />
<![endif]-->

So there you have it! I’ve cross-posted this update on the original article as well, so if you’d like a little more context you’ll want to give it a read. Unfortunately IE 6 will still be around for quite some time, so we’re still going to have to support that browser for years to come. Here’s to hoping that Microsoft is a little more prompt with their updates to IE in the future.

Also, if you’d like to see some IE 7 conditional comments in action, just view the source of this page!

Posted in: Code, CSS, CSS Tips, Web Development, Web Standards