05-08-2008

CSS/(X)HTML IE conditionals

Are formed as normal HTML comments and thus ignored by all browser except for Internet Explorer version 5 onwards. IE only parses the content inside the conditional if it resolves to true. Thus allowing you to target IE

<!--[if IE 6]>
	Instructions for IE 6 here
<![endif]-->
 

Here are the conditions you can use:

ItemExampleComment
IE[if IE]The only currently supported feature is the string "IE", corresponding to Internet Explorer.
value[if IE 7]An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. For more information, see Version Vectors.
![if !IE]The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt[if lt IE 5.5]The less-than operator. Returns true if the first argument is less than the second argument.
lte[if lte IE 6]The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt[if gt IE 5]The greater-than operator. Returns true if the first argument is greater than the second argument.
gte[if gte IE 7]The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( )[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.
true[if true]Always evaluates to true.
false[if false]Always evaluates to false.

Example:

<!--[if IE 5]>
	<p>Welcome to Internet Explorer 5</p>
<![endif]-->

Different stylesheets for different versions of internet explorer:

<head>
<!--[if IE 6]>
	<link rel="stylesheet" href="/css/ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
	<link rel="stylesheet" href="/css/ie7.css" type="text/css" />
<![endif]-->
</head>

Comments:

Your comment:

»

 

[x]