Using Conditional Comments to add CSS file for IE browsers

Due to a lack of standards compliance in Internet Explorer (particularly older versions) it is often necessary to add CSS code to get around the shortcomings of IE.

However, there's no point in using the file on browsers other than those older versions of IE.  To do so would only clutter the site, slow load times, and introduce possible conflicts.

Fortunately IE can recognize Conditional Comments, which are HTML comments with a little logic added to them.

In the example below, the conditional comment is used to determine whether the user's browser is Internet Explorer prior to version 7.

The condition may be read as "If browser is less than IE version 7" or, more accurately, "If browser is Internet explorer AND has a version number less than 7".

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

If the condition is met, the browser will load the CSS file.

Typically, such files contain CSS code which works around problems caused by the standards non-compliance of older IE browers.

The code block above should be placed in the <head> section of your page, below all other css file references. Placing it last will ensure that it's CSS declarations will not be overridden by subsequent declarations in other CSS files.

Leave a Reply