Internet Explorer Conditional Statements

Contact Us or call 1-877-932-8228
Internet Explorer Conditional Statements

Internet Explorer Conditional Statements

Internet Explorer, in versions 9 and older, provides a way of adding conditional statements that allow the designer to specify which version(s) of the browser should display certain sections. These conditional statements appear as simple HTML comments to other browsers (e.g., Firefox) and are therefore ignored. This can be very useful for addressing CSS bugs in older versions of Internet Explorer without having any impact on other browsers.

The syntax is shown below:

<!--[if IE 7]>
	HTML Code only shows up on Internet Explorer 7
<![endif]-->

As you can see, the beginning if statement starts with the beginning of an HTML comment (<!--) and the endif statement ends with the end of an HTML comment (-->), so all other browsers view the whole contents as a comment and do not render any of the contained code.

The code shown above will only be displayed in Internet Explorer 7, but you can use operators to specify multiple versions that will display a block of code. The operators are shown below:

Conditional Operators
Operator Description Example
! not <!--[if ! IE 7]>
lt less than <!--[if lt IE 7]>
gt greater than <!--[if gt IE 7]>
lte less than or equal <!--[if lte IE 7]>
gte greater than or equal <!--[if gte IE 7]>

Note that these conditional comments cannot be embedded within CSS. The following is invalid:

<style type="text/css">
.MyStyle {
	background-color: red;
	<!--[if lt IE 7]>
		background-color: blue;
	<![endif]-->
}
</style>

You would instead structure this as follows:

<style type="text/css">
.MyStyle {
	background-color: red;
}
</style>

<!--[if lt IE 7]>
<style type="text/css">
.MyStyle {
	background-color: blue;
}
</style>
<![endif]-->
			         

The following example shows how you might structure an HTML page using Internet Explorer's conditional comments to deal with older IE-specific bugs:

Code Sample:

BrowserBugs/Demos/ConditionalCommentsStructure.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<head>
<link href="main.css" rel="stylesheet">
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 6]>
<link href="ie5.css" rel="stylesheet">
<![endif]-->

<title>Conditional Comments Structure</title>
</head>
<body>

</body>
</html>

Code Explanation

The advantage of such a structure is that it separates the CSS hacks from the main style sheet, so main.css should standalone as a nice clean CSS file that works great with the browsers that support the standard well.

For newer versions - IE version 10 or later - conditional statements no longer work: the browser will not read them. The good thing is that we have much less need for these conditional statements, since Internet Explorer 10 and later present many fewer quirks than did earlier versions. However, we may still need to handle browser inconsistencies. Another way to handle specific-browser issues is to use a Microsoft Internet Explorer-specific media query:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	p {
		font-size: 15px;
	}
}

The code above would, for instance, style all paragraphs with font size 15px for Internet Explorer version 10 and later.

Of course, in general we probably won't need to - and don't want to - create styles for each specific browser: using a stylesheet reset, like the one we've looked at from Eric Meyer earlier in this course, to remove browser inconsistencies is a better way to go, since we can then render our own styles for all browsers.

In the following section, we'll look at a common browser bug and use what we have learned in this section to address it.

Next