Conditional comments are an absolutely vital tool to assist you in making your site fully compatible with Internet Explorer (especially v6). Once I learned about conditional comments and how to use them, I couldn’t believe I had spent so long doing web design without them.
Simply put, conditional comments (sometimes referred to as version vectors) are a way to direct specific code only to Internet Explorer. This makes the process of fixing IE issues on your site exponentially easier – you can write whatever code is necessary for IE, and it won’t touch any other browsers.
Basic Usage
So how do they work? Just add the following code to the head of your HTML document:
The beauty of conditional comments is that they are wrapped in regular HTML comment tags (<!-- -->). Any browser other than IE will completely ignore whatever you write between the <!--[if IE]> and <![endif]--> lines, since they’ll see the entire block of code as a comment. IE, however, will pick up on the special syntax and process whatever code is inside, as if it weren’t hidden inside a comment.
As an added bonus, using conditional comments won’t invalidate your code, because online validators will also see the entire chunk of code as a comment and skip over it. Thus, you can throw whatever non-standard, invalid hacks you need to into a conditional comment to fix your site for IE; if your HTML and CSS is valid otherwise, your site will continue to validate.
Here’s a very simple example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
body {background: #fff;}
</style>
<!--[if IE]>
<style type="text/css">
body {background: #000;}
</style>
<![endif]-->
</head>
</html>
Note: the syntax of the conditional comment needs to be exactly what’s shown in the example in order for it to work (same spacing, capitalization, etc.). IE interprets it very strictly, and will revert to processing everything as a regular comment if it is not written correctly.
Copy and paste the above code into a new document and save it. Open the page in IE and the background color will be black; in any other browser, it will be white.
Advanced Usage
You’re not restricted just to writing internal styles – you can use a conditional comment to link to a separate external IE-only stylesheet:
This approach will let you create a base stylesheet for your site, and then fix any IE issues through a separate IE-only stylesheet that doesn’t at all touch any other browser. This frees you from the burden of having to write code that works both in IE and other browsers simultaneously (a common annoyance, since IE often doesn’t interpret standards-compliant code correctly).
But wait – there’s more! You can use conditional comments to target specific versions of IE individually:
Here, ie6.css will apply if the visitor is using IE 6 or lower (lte = “less than or equal to”); ie7.css will apply if the visitor is using IE 7 or higher (gte = “greater than or equal to”). You can use the qualifiers lt and gt also, for “less than” and “greater than,” respectively.
A note about Internet Explorer 8: IE8 continues to support conditional comments, so you can target that browser as well, if you need to. In addition, IE8 introduces a new feature called Compatibility View, which, when enabled, will render older sites according to IE7 standards. In addition, it will also process conditional comments directed at IE7. So, a site that uses conditional comments for IE7 should look identical in IE8 with Compatibility View enabled.
Conditional Comments
Conditional comments are an absolutely vital tool to assist you in making your site fully compatible with Internet Explorer (especially v6). Once I learned about conditional comments and how to use them, I couldn’t believe I had spent so long doing web design without them.
Simply put, conditional comments (sometimes referred to as version vectors) are a way to direct specific code only to Internet Explorer. This makes the process of fixing IE issues on your site exponentially easier – you can write whatever code is necessary for IE, and it won’t touch any other browsers.
Basic Usage
So how do they work? Just add the following code to the head of your HTML document:
The beauty of conditional comments is that they are wrapped in regular HTML comment tags (
<!-- -->). Any browser other than IE will completely ignore whatever you write between the<!--[if IE]>and<![endif]-->lines, since they’ll see the entire block of code as a comment. IE, however, will pick up on the special syntax and process whatever code is inside, as if it weren’t hidden inside a comment.As an added bonus, using conditional comments won’t invalidate your code, because online validators will also see the entire chunk of code as a comment and skip over it. Thus, you can throw whatever non-standard, invalid hacks you need to into a conditional comment to fix your site for IE; if your HTML and CSS is valid otherwise, your site will continue to validate.
Here’s a very simple example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> <style type="text/css"> body {background: #fff;} </style> <!--[if IE]> <style type="text/css"> body {background: #000;} </style> <![endif]--> </head> </html>Note: the syntax of the conditional comment needs to be exactly what’s shown in the example in order for it to work (same spacing, capitalization, etc.). IE interprets it very strictly, and will revert to processing everything as a regular comment if it is not written correctly.
Copy and paste the above code into a new document and save it. Open the page in IE and the background color will be black; in any other browser, it will be white.
Advanced Usage
You’re not restricted just to writing internal styles – you can use a conditional comment to link to a separate external IE-only stylesheet:
This approach will let you create a base stylesheet for your site, and then fix any IE issues through a separate IE-only stylesheet that doesn’t at all touch any other browser. This frees you from the burden of having to write code that works both in IE and other browsers simultaneously (a common annoyance, since IE often doesn’t interpret standards-compliant code correctly).
But wait – there’s more! You can use conditional comments to target specific versions of IE individually:
In fact, you can even add in “less than” and “greater than” qualifiers:
Here,
ie6.csswill apply if the visitor is using IE 6 or lower (lte= “less than or equal to”);ie7.csswill apply if the visitor is using IE 7 or higher (gte= “greater than or equal to”). You can use the qualifiersltandgtalso, for “less than” and “greater than,” respectively.A note about Internet Explorer 8: IE8 continues to support conditional comments, so you can target that browser as well, if you need to. In addition, IE8 introduces a new feature called Compatibility View, which, when enabled, will render older sites according to IE7 standards. In addition, it will also process conditional comments directed at IE7. So, a site that uses conditional comments for IE7 should look identical in IE8 with Compatibility View enabled.
Like this: