Brady Emerson

I was recently working on a project for work and, as usual, I was having trouble with the page rendering differently in various browsers and versions. I started troubleshooting the CSS using various techniques and in doing so, found an appreciation for a unique feature of Internet Explorer, conditional comments. If you are not familiar with them, they were introduced by Microsoft in 1995 with Internet Explore 5 and allow web developers to hide or expose certain content based on the version of IE the user is running. They are completely native to the browser, require no hacks or JavaScript, and the resulting code is still valid HTML!

<!--[if IE 8]>This will only show in IE 8!<![endif]-->

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

Browsers other than IE will ignore the above as a completely valid HTML comment, but IE recognizes the special syntax and parses the condition to determine when it is appropriate to display. There are a variety of conditional operators that allow developers to target IE in general, or versions greater than / less than or equal to a specific number. To learn more about IE’s conditional comments and the available options, check out Microsoft’s msdn page on the subject.

The ease and cleanliness of this method made me start wondering why I couldn’t do [if CHROME] or [if LTE FF2]? Microsoft recognized early on that, because different browsers, even different versions of the same browser, render differently, there is a need to specify code for a specific browser or version. While other browsers may rightfully consider themselves more “standards compliant”, tweaks are still made with every new version which cause differences, and I believe it would be helpful to be able to employ the clean, effective conditional comments method to specify unique code for every browser.

In the mean time we will have to stick to CSS syntax hacks and using JavaScript to detect browsers and versions based on the UserAgent string. The best way I have found is using JavaScript to add one or several browser descriptors, like “chrome”, “ie6″, or “ff”, to the class attribute of the html or body tag and then target these in your stylesheet.