Toolroom Tech Blog

Devlopers Digest

Utilization of Conditional Statements for Internet Explorer

A typical HTML comment is ignored by the web browser. But Internet Explorer utilizes the well known HTML comment for something that we could call a conditional notation.

A typical HTML comment is ignored by the web browser. But Internet Explorer utilizes the well known HTML comment since version 5 for something that we can call a conditional notation.

Those Conditional Comments are not contained within any HTML Standard, they're only noticed by Internet Explorer and some parts of the Microsoft Office Suite. As the name already says, they offer something like conditional statements within HTML, without disrupting the validity of a HTML document.

How does it look like

<!--This is a typicall HTML comment-->
<!--[if expression]>This is a conditional comment for IE<![endif]-->
<![if expression]>This is a conditional comment for IE and others<![endif]> 

The conditional expression is formed from a combination of feature, operator, and/or value, depending on the feature.

The first line is a typical HTML comment, not visible to anyone. Even the Browser does not interpret its content. The second line shows the structure for a conditional comment, visible only for Microsofts Internet Explorer. Its content is hidden from browsers that do not support conditional comments, this type of conditional comment is called downlevel-hidden.
Now take a look at the third line. Internet Explorer will parse the expression, even tough this is a non valid HTML node: note, that the -- is missing at the start and at the end of the comment. All other browsers should typically ignore this invalid node, but display its content. That's why it is called downloevel-revealed conditional comment.

Samples

<!--[if lte IE 7]>
    <SCRIPT LANGUAGE="javascript">
        alert("This is a fix for Internet Explorer 6 and .");
    </SCRIPT>
    <br style="clear:both;"/>
<![endif]-->

This condition and its content is visible for IE only. It will execute Java Script and load a HTML fix for IE Versions lower than or equal 7.

<![if lt IE 9]>
    <p>This application requires at least Internet Explorer 9.</p>
<![endif]>

This expression is noticed as valid expression for IE. All IE versions lower than 9 will show, that at least IE9 is required to show this content. Since other browsers ignore the invalid comment declaration, they will also show this requirement.

Features

ItemExampleComment
IE [if IE] The string "IE" is a feature corresponding to the version of Internet Explorer used to view the Web page.
value [if IE 7] An integer or floating point numeral corresponding to the version of the browser.
WindowsEdition [if WindowsEdition] Windows Internet Explorer 8 on Windows 7. The string "WindowsEdition" is a feature corresponding to the edition of Windows used to view the Web page.
value [if WindowsEdition 1] An integer corresponding to the edition of Windows used to view the Web page (More about the version)
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.

Operators

ItemExampleComment
! [if !IE]

The NOT operator.

lt [if lt IE 5.5] The less-than operator.
lte [if lte IE 6] The less-than or equal operator.
gt [if gt IE 5] The greater-than operator.
gte [if gte IE 7] The greater-than or equal operator.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.

Integrate your own AddOn

Developers of AddOns for IE may also utilize conditional comments in order to query their versions. Therefore, just add a REG_SZ value to the Version Vector Registry key. The name of the new key defines the feature value to use in a conditional comment, as shown in the following example.

 

HKEY_LOCAL_MACHINE
   Software
      Microsoft
         Internet Explorer
            Version Vector
               ToolroomBar = 1.1

Then use it on your web page in the following manner:

<!-- [if (gte ToolroomBar 1)&(lt ToolroomBar 2)]>
    You are using the ToolroomBar Version 1.x
<![endif]-->

Conditional Comment Summary

  1. Load CSS and Script fixes for a subset of Browser versions
  2. Show special content for a subset of IE versions and Windows Versions
  3. Allows utilization for own Browser Extensions on IE
  4. Low client-side impact
  5. No script required
  6. Cross Browser compatible (because they don't know it :))

Should I really use it?

I do not recommend it, only for certain cases ... if there's no other clean way.

Loading