All you need to know about conditional html comments

Sometimes (almost always) when a website is designed, it is necessary to apply different rules and styles depending on the browser. In this way, you can fix any possible error and limitations of a browser without affecting any other browsers.

Microsoft introduced since Internet Explorer 5 a mechanism called conditional comments which still include the most recent versions , and lets you apply different CSS styles or Scripts depending on the version of the browser.

The syntax for conditional comments is based on normal HTML comments i.e :

<!-- Normal HTML comment --> 

<!--[if expression]> Conditional content <![endif]-->

The syntax for conditional comments allow your content to be ignored in any browser other than Internet Explorer the family. The expressions are created by combining identifiers, operators, and values. The unique identifier is defined IE, which allows you to create the simplest and useful conditional comment:

<!--[if IE]>
  This browser is internet explorer (any version)
<![endif]-->

If you want to restrict the scope of the conditional comment to a single version of Internet Explorer, you can directly indicate the version number i.e:

<!--[if IE 5.5]>
  this browser is Internet Explorer 5.5
<![endif]-->

<!--[if IE 6]>
  this browser is Internet Explorer 6
<![endif]-->

<!--[if IE 8]>
  this browser is Internet Explorer 8
<![endif]-->

IE >= 10

From Internet explorer 10 and upper versions, the previous syntax doesn't work anymore. Instead use the following syntax (note that the operators still working as usual):

<!--[if gte IE 10]><!--> 
     Include any style or script here if IE version is 10 or upper
<!--<![endif]-->

So an use of case should be :

<!--[if lt IE 9]>
   This is less than IE9
<![endif]-->

<!--[if gt IE 8]> <!-- -->
   this is all browsers: IE9 or higher, firefox, chrome, etc.
<!-- <![endif]-->

Operators

The conditional comments allow you to use operators like : ! (not), lt (less than) , lte (less than or equal) , gt (greater than), gte (greater than or equal).

Finally, it is also possible to use more complex operators similar to those can be found in programming languages as : & (and) , | (or). You can also use parentheses to create advanced expressions.

Not (!)

The simplest operator defined by conditional comments is the negation operator, indicated before an expression to recognize the opposite result (!):

<!--[if !IE]><!-->
  Any browser except internet explorer
<!--<![endif]-->

Less than (lt)

Use less than to identify any older version than your specification :

<!--[if lt IE 7]>
  Any previous version to Internet Explorer 7
<![endif]-->

Less than or equal (lte)

Use less than or equal to identify any older version or equivalent to your specification :

<!--[if lte IE 6]>
  This browser is Internet Explorer 6 or any previous version
<![endif]-->

Greater than (gt)

Use greater than to identify any greater version than your specification :

<!--[if gt IE 7]>
   This browser is newer than Internet Explorer 7
<![endif]-->

Greater than or equal (gte)

Use greater than to identify any greater version or equivalent to your specification :

<!--[if gte IE 8]>
  This browser is Internet Explorer 8 or any upper version
<![endif]-->

And (&)

The AND operator (&) combines two expressions to create a condition that is only acomplished if both expressions are true :

<!--[if (gt IE 5) & !(IE 8)]>
  This browser is ANY upper version than Internet explorer 5 EXCEPT Internet explorer 8
<![endif]-->

Or (|)

The OR operator (|) also combines two expressions and creates conditions are met when at least one of the two expressions is true :

<!--[if (IE 7) | (IE 8)]>
 This browser is Internet Explorer 7 or Internet Explorer 8
<![endif]-->

Have fun