Working with Conditional Comments
Ben Logan - Published: 23rd Feb 2009 09:15 GMT
Conditional Comments behave just like simple HTML comments, but they have a specific syntax that IE/Windows browsers can recognise. When that syntax is exactly correct, IE/Windows browsers will look inside the comment and parse whatever is inside.
They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.
Why do we need Conditional Comments
The CSS box model defines the width and height of a box created with CSS as the width or height of the content area of said box. If the width property is left off, then the box is as wide as the content within it. The same goes for the height. If padding, borders, or margins are added to the box, they are added outside of the content width or height.
However, versions of Internet Explorer before IE6/strict don't work this way. In their DOM, the width of the box is the width of the content plus any border or padding.
Internet Explorer does not render the box model correctly. If you want your Web pages to look the same no matter what browser views them, then you have to do something to offset this incorrect rendering of the box model. Typically this would have meant hacking the stylesheet or using filters to apply the Box Model Hack to cater for variations between Internet Explorer browsers.
Why should you use them?
They can make for a good alternative to using style sheet hacks and filters within your main stylesheet, which can be difficult to track and often look messy in the code.
How to implement Conditional Comments
We like to use the method of linking to a separate stylesheet for the changes required for an individual browser and this line of code is added within the <head></head> tags of the (x)HTML document:
<!--BEGIN STYLESHEET INCLUDES -->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<![endif]-->
<!--[if IE 7.0]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie7.css" />
<![endif]-->
In the code above we are asking Internet Explorer 6 to load the stylesheet named "ie6.css" and apply specific properties in the stylesheet to the page.
If the browser is Internet Explorer 7 then we will load the stylesheet named "ie7.css" and apply specific properties in the stylesheet to the page.
What else can you do?
The Conditional Comments above are using the "if" statement to give an exact browser version, but you can enhance your conditional comments to use operators, such as "lt" which means "less than" so that any Internet Explorer browser number less than the one you supply will be effected.
| Operator syntax: | Description: |
|---|---|
! |
The "not" operator. |
lt |
The "less than" operator. |
lte |
The "less than or equal to" operator. |
gt |
The "greater than" operator. |
gte |
The "greater than or equal to" operator |
Need some more information?
If you would like to learn more about how we can help you with Web design & development then please call us or email us below and we would be happy to help out where we can.
We are ready to answer your questions right now, so please contact us by telephone on +44 (0)207 168 7526 or drop us a quick email info@spotlessinteractive.com and we will do our best to help you with any questions you might have.
