Create an IE Only Stylesheet

IE provides comment tags which is supported most of the IE version to target specific versions for creating IE Only Stylesheet.

How’s your experience with IE? There is a 99% chance that you’ve had a hair-pulling experience with IE.

We use conditional stylesheets when we face any problems and want to keep our code very clean.

Internet Explorer 9 and lower: You can use conditional comments to load an IE-specific stylesheet for any version that you wanted to target specifically.

Here are meaning of syntax:

!IE = not IE
gt = greater than
gte = greater than or equal
lt = less than
lte = less than or equal

For all versions of IE

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="sample.css" />
<![endif]-->

Everything except IE

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="sample.css" />
<!--<![endif]-->

Target IE 8 only

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="sample.css">
<![endif]-->

Target IE 7 only

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

Target IE 6.5 only

<!--[if IE 6.5000]>
<link rel="stylesheet" type="text/css" href="sample.css" />
<![endif]-->

Target IE 8 and lower

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="sample.css" />
<![endif]-->

or,

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="sample.css" />
<![endif]-->

Target IE 8 and higher

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="sample.css" />
<![endif]-->

or,

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="sample.css" />
<![endif]-->

However, in the beginning of IE version 10, conditional comments are no longer supported in IE.

Internet Explorer 10 & 11: You can create a media query using -ms-high-contrast by which you can place your IE 10 and 11 specific CSS styles.

Because -ms-high-contrast is Microsoft-specific which is only available in IE 10+ and this will only be parsed in Internet Explorer 10 and greater.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles */
}