If you find Conditional Comments confusing, read this complete guide to applying and learning how to implement Conditional Comments into your web designs to help browsers such as Internet Explorer to display your design correctly.
Conditional Comments…What are they?
About Conditional Comments
One of the main problems facing web designers today is getting their site to render perfectly on a wide range of browsers, and getting your site to display correctly can often involve various CSS hacks, often resulting in messy and invalid code.
An alternative method of achieving this is accomplished through detecting which browser your visitor is using, and then letting them see a version of your site specifically for that browser. There are many ways of doing this such as inserting a script into your code, which is fine, however if the rest of your site is just plain HTML, loading a scripting engine can take quite long and is unnecessary. This is where conditional comments come in.
Conditional comments give us clear advantages over scripted browser detection techniques. They allow designers and developers to fully utilise the improved features offered by today’s latest browsers, whilst still having pages that downgrade in an elegant fashion for the older browsers that are still in use.
Terminology
Downlevel browser – Browsers earlier than Internet Explorer 5.
Uplevel browser – Internet Explorer 5 and later, this also includes modern browsers such as Firefox.
Downlevel-hidden – A conditional comment block ignored by downlevel browsers. Internet Explorer 5 and later versions display the content of the comment if it evaluates to be true.
Downlevel-revealed – A conditional comment block that is displayed by downlevel browsers. Internet Explorer 5 and later versions display the content of the comment if it evaluates to be true.
Benefits of Using Conditional Comments
Low client-side impact - When a downlevel browser encounters a downlevel-hidden comment, the browser skips the HTML inside the comment saving the client machine resources.
No script required - Conditional comments are just plain HTML so they don’t require scripting or DHTML, meaning that no scripting engine needs to be loaded, reducing page load times.
Cross-browser - Conditional comments were developed with Internet Explorer 5 in mind, but their use is not restricted to just Internet Explorer. They are used to customize the content displayed to browsers, IE and non-IE, whether they support conditional comments or not.
Syntax
| Type | Syntax |
| Normal HTML comment | <!– text –> |
| downlevel-hidden | <!–[if expression]> text <![endif]–> |
| downlevel-revealed | <![if expression]> text <![endif]> |
| Item | Example | Comment |
| IE | [if IE] | Only supported string is Internet Explorer, can be used for other browsers with the third item in this list. |
| value | [if IE 5] | Number indicating the version of IE the comment will be applied to, can be an integer or decimal, e.g. 5.5. |
| ! | [if !IE] | The NOT operator. This is placed in front of the operator and reverses the command, this example would apply to all non-IE browsers. |
| lt | [if lt IE 7] | Less-than to operator, applies to browsers earlier than the one indicated. |
| lte | [if lte IE 6] | Less-than or equal to operator, applies to browsers earlier than or equal to the one indicated. |
| gt | [if gt IE 5] | Greater-than operator, applies to browsers later than the one indicated. |
| gte | [if gte IE 7] | Greater-than or equal to operator, applies to browsers later than or equal to the one indicated. |
| ( ) | [if !(IE 7)] | Subexpression operator, can be used with additional comments to create more complex expressions, see below. |
| & | [if (gt IE 5)&(lt IE 7)] | AND operator, applies if all subexpressions evaluate to true |
| | | [if (IE 6)|(IE 7)] | OR operator, applies if any of the subexpressions evaluates to true. |
| true | [if true] | Always evaluates to true. |
| false | [if false] | Always evaluates to false. |
Pages: 1 2
