What's Wrong with Internet Explorer Browser Conditional Comments?
Let's first have a brief look at what conditional comments are.
Many versions of Internet Explorer ("IE") support an extra set of HTML tags in webpages. These are special comments you can use to hide or show links and content in your webpage. These special comments allow one to determine the version of browser used (Internet Explorer only), and if it is IE only that is being used by the end user. These new statements are termed "conditional comments". They include conditions, and are used to assign special conditional HTML declarations, which address differences between IE and the rest of the web browsers out there. Often these comments are used to fix CSS errors and differences in markup, or skip over content blocks and tags specifically tied to a version of IE. There are variations of these comments, which include so-called "downlevel" versions, but we will showcase a general example of these comments below. Keep in mind these special tags only work in Internet Explorer. The following example shows how to hide markup and content from all Internet Explorer browsers who's version is less that version 7:
<![if lt IE 7]>your special markup here<![endif]>
Also you can do "[if !IE]", or similar "unary" conditions. In this case, returns true if this browser is not IE (any version). In this way, your condition can extend to separating IE from all non-IE browsers.
You can Google "Conditional Comments" online for more information. There are many great articles online about the virtues of these types of web page statements.
So, what is wrong with IE conditional comments?
Well, nothing really, if you like managing all your content, markup, and CSS styles on a page-by-page basis and you like the idea of using a special proprietary tag that only works in Internet Explorer. Doing so means you cannot use these tags to say differentiate Google Chrome from Firefox. Not good. If your site has thousands of pages, using these tags could be a problem as well, as now you are using page-dependent technologies to address cross-browser issues. It also means, you are now managing design attributes in the content layer, which breaks with the general purpose of CSS. That purpose is to help you separate out the design layer from the content layer in your website pages. If you are now mixing conditional comments into your content and markup, suddenly you are back doing things the "old-fashioned" way. Or rather, how we used to manage web site look-and-feel back circa 1998. It's a new age now, folks, and "Web Standards and the newer W3C recommendations and markup standards has replaced all that. You should now move all cross-browser design control to your linked CSS style sheets, whenever possible. Doing so means you have complete control over how thousands of web pages look in your site. It's MUCH easier that way! (see our article, "CSS - Embed, Import, or Linked" for information on how best to connect style sheets to your web pages.)
Many people get around that argument by using "includes" or usercontrols, which is fine. Placing all your linked CSS style sheets in an include, then using comments to filter them by IE browser version, might seem useful to you. Still though, the same problem exists. When it comes to controlling the layout and design of your web pages, you are still stuck using page-level tricks to control look-and-feel when you resort to IE conditional comments. That is not such a good idea. Managing web page design can be done using simple tricks in CSS. So, we avoid conditional comments, whenever possible. We do use them very rarely. But for the most part, we avoid them whenever possible. There are simply better technologies out there that work with the newer Web Standards approach to web design.
Another problem with these types of comments is they still do not help you address the fundamental issues in other browsers (other than Internet Explorer). This means you may have fixed issues in versions of IE, but what about many other popular browsers? What about Macintosh Safari or Firefox? Sorry, you are out of luck with IE conditional comments because they are simply not seen or used by those browsers. It may help hide issues from both browsers, but certainly will not help you solve problems between the two.
Conditional comments are often used to address large batches of markup page-level issues, and often do not assist you in specific style sheet issues between IE versions or other browsers. For example, if I use [if !IE6] to hide say a block of markup, or a linked style sheet, I still have IE5 and IE7 to contend with, each of which have very separate and troublesome issues, especially when interpreting CSS in "standards mode". You will have to resort to creating separate style sheets for each of these browsers as a whole now, which is tedious and cumbersome to the web application. You might be able to manage large batches of CSS issues in separate style sheets using conditionals. But duplicate CSS sheets and rules means your application is now more difficult to manage. Often, it's best to address specific Internet Explorer issues inside the style sheet itself using "hacks" that address specific, targeted issues in the rules and their properties. Just do a search for "CSS hacks" and you will find plenty online. In general, hacks that fix browser-specific issues where the browser has been superceded by a newer version, means the hack is stable and a reliable tool to use in addressing that version of browser. As long as its not seen in the newer version, it is ok to use these tricks. Many people make valid argumenets against CSS hacks for very good reasons. But if you are in a bind and have solid evidence of a flaw in a browser you know you cannot work around with conditional comments or special markup, such tricks are a reliable way to address the problem.
In summary, if you choose to use conditional comments, try and use them to control linked style sheets in a header-based include or usercontrol. In those cases, you can now manage effects in one place rather than hundreds of web pages. If you do use them to address non-IE issues, be careful and use special duplicate style sheets to address your list of bugs. Finally, if you use them in web pages themselves to address markup problems between browsers and versions, we recommend you use them very sparingly and in ways that dont make managing page-level content a tedious and time-intensive process. Duplicate content, CSS, and markup blocks is just more kilobytes of data your pages must now download to the browsers. Over millions of page hits, that adds up! This doesnt even begin to address the time involved to change these comments, should you feel the need to. It all adds up to extra cost in the end. (Many of you may know what the "bottom line" is!) Instead, we recommend linked style sheet CSS-level hacks and fixes. You will find managing design-level changes much easier using your linked style sheets.
Looking for great standards-based Website Products for your website? Get GiantIsland Web Products!