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 | |
| downlevel-hidden | text |
| downlevel-revealed | text |
| 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. |
Downlevel-hidden Conditional Comments
Downlevel-hidden comment contains hyphens (–) in the opening and closing tag which resemble a normal HTML Comment. As the start and end of this comment is identical to the HTML Comment element, downlevel browsers ignore the content inside the comment block, meaning that this content is hidden from browsers that do not support conditional comments.
If the result of the expression is true, the content contained in the comment is parsed and displayed by IE5 and later browsers.
Downlevel-revealed Conditional Comments
The downlevel-revealed conditional comment lets you include content in browsers that do not support conditional comments. Although the conditional comment itself is ignored, the HTML content inside is still displayed by the browser.
Please upgrade your browser to one that supports Conditional Comments.
This code can be used to determine whether the user’s browser can support Conditional Comments. If it can display them, then it will read the comment as false and display nothing. If however it cannot, it will still display the text asking the user to upgrade their browser.
Version Vectors
Conditional Comments can also be used to determine the version of the browser. To check the version your user is using, you use the version vector, followed by a decimal point and four digits. An example is IE 5.5, which would be displayed:
You are not using Internet Explorer.
You are using a downlevel browser, please upgrade!
hOW do I do the same for firefox???
or
what is the syntax??
Conditional Comments are only used for IE.