CSS Hackz Series: Targeting and Filtering Internet Explorer 7

Continuing the CSS Hackz Series, I present a small army of hacks for targeting and filtering Internet Explorer 7! Here, “targeting” IE 7 means to deliver CSS and/or (X)HTML to IE 7 only, while “filtering” means to deliver CSS and/or (X)HTML to every browser that is not IE 7. In other words, targeting is to include (apply), filtering is to exclude (hide). Let’s dive right in..

Conditional Comments

Conditional comments are a proprietary Microsoft technique for targeting and filtering different versions of Internet Explorer. Other browsers do not understand them, and will treat them as regular (X)HTML comments. Of all the techniques presented in this article, conditional comments are perhaps the most flexible method for targeting and filtering any version of Internet Explorer, including IE 7. Here are some self-explanatory examples:

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

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

<!--[if lt IE 7]>
	<link href="target-IE6-and-below.css" rel="stylesheet" type="text/css">
<![endif]-->

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

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

<!--[if gte IE 7]>
	<link href="target-IE7-and-above.css" rel="stylesheet" type="text/css">
<![endif]-->

..and so on. Keep in mind that conditional comments are good for including any type of (X)HTML content, not just stylesheet links (as demonstrated above). For more information on understanding and using conditional comments, check out my two articles:

• Fun with Downlevel Conditional Comments
• Wrapping Your Head around Downlevel Conditional Comments

Targeting Internet Explorer 7

There are many ways to target Internet Explorer 7 with CSS. Note that some of these methods also target previous versions of Internet Explorer. Some of these methods validate, others do not. Also keep in mind that these hacks may or may not be “fixed” in future versions of IE.

Targeting IE 7 via VALID selector hacks

These “hacks” actually consist of completely valid CSS. Long-winded explanations, I think, are unnecessary for these hacks as they are very straightforward. If you have any questions, leave a comment and I will do my best to help you out.

/* target IE6 and below */
* html {}

/* target IE7 and below */
*:first-child+html {}
* html {}

/* target IE7 only */
*:first-child+html {}

/* target IE7 only */
@media { property: value; }

/* target IE7 and all modern browsers */
html>body {}

/* target element in IE7 and below */
a:link:visited, a:visited:link {}

Targeting IE 7 via INVALID selector and property hacks

The remainder of the IE-7 targeting hacks consist of invalid CSS. As before, they are quite common and very straightforward to use. If you have any questions, leave a comment and I will do my best to help you out.

/* target IE6 only */
selector {
	_property: value;
	}

/* target IE7 and below */
selector {
	.property: value;
	}

/* target IE7 and below */
selector {
	*property: value;
	}

/* target IE7 and below */
selector {
	property: value !ie;
	}

/* target with importance IE7 and below */
selector {
	property: value !important!;
	}

/* select all descendants of the html element in IE7 and below */
html* {
	property: value;
	}

/* select the body element in IE7 only */
>body {
	property: value;
	}

Filtering Internet Explorer 7

Just as with targeting, there are many ways to hide CSS styles from Internet Explorer 7. For better or worse, most of these methods also filter previous versions of Internet Explorer. Some of these methods validate, others do not. Also keep in mind that these hacks may or may not be “fixed” in future versions of IE. And a final note: as a way to keep things organized, I have given each of these hacks a name. If something seems incorrect, please let me know! :)

Filter IE 7 via the @import hack

Filter IE 7 and below by adding a media selector to an @import rule. For example, adding the “all” media selector will cause IE to ignore the entire @import directive, thereby enabling you to deliver a “non-ie.css” stylesheet to all modern browsers (i.e., anything that is not IE). Feel free to use any media type necessary:

@import "non-ie.css" all;

Filter IE 7 via the head ~ hack

Hide any CSS from IE 7 and below using the “head ~” hack. The CSS styles for any selector (e.g., p, div, span, etc.) placed after the body selector will not be applied by Internet Explorer 7 and below. Note: uses the “~” combinator from CSS 3:

head ~ /* */ body {}

Filter IE 7 via the html hack

Here is another way to hide any CSS from IE 7 and below. This hack uses an empty CSS comment inserted between the descendant and the body selectors. CSS delivered via this method will be applied by all browsers except Internet Explorer 7 and below:

html>/**/body {}

Filter IE 7 via the class^= hack

This hack is good for applying styles to specific classes for all browsers except IE 7 and below. I think the best way to explain this hack is to provide some example code:

<!-- (X)HTML markup -->
<div class="target">This div will be styled in all browsers except IE</div>

/* CSS hack to filter IE */
* div[class^="target"] {}

To apply this hack in other scenarios, replace the div selector with any selector you wish (e.g., p, div, span, etc.). Likewise, replace the target class name with that of your desired class.

Filter IE 7 via the xmlns hack

This method of filtering IE 7 evolved from the Triple-X hack, best explained via code example:

<!-- (X)HTML markup -->
<p id=target">this will be red in IE 7, green in other browsers</p>

/* first, use this to target modern browsers: Mozilla, Safari, Konqueror, Opera 9 and IE7 */
p[id$="target"] {
	color: red;
	}

/* next, use this to filter IE 7 and apply to Mozilla, Safari and Konqueror */
p[id$="target"]:not([class="xxx"]) {
	color: green;
	}

/* finally, use this to apply the previous style to Opera 9 */
@media all and (min-width: 0) {
	p[id$="target"] {
		color: green;
		} 
	}

Yeah, a bit much. Fortunately, the technique has been consolidated and improved by eliminating the need to handle Opera 9 in a separate code block. Here is the improved method of filtering IE 7 while targeting modern browsers:

<!-- (X)HTML markup -->
<p id=target">this will be red in IE 7, green in other browsers</p>

/* use this to target modern browsers: Mozilla, Safari, Konqueror, Opera 9 and IE7 */
p[id$="target"] {
	color: red;
	}

/* use this to filter IE 7 and apply to Mozilla, Safari, Konqueror, and Opera 9 */
html[xmlns] p[id$="target"] {
	color: green;
	}

Note that the lang attribute may be used instead of xmlns attribute.

Filter IE 7 via the lang hack

This method hides CSS from IE 7 by first filtering IE 7 and Safari, and then restoring the styles to Safari. This technique employs valid CSS 3, but unfortunately requires the use of the lang attribute in your markup. The lang attribute is valid in XHTML 1.0, but has been deprecated in XHTML 1.1. Here is an example of how to implement this technique:

<!-- XHMTL 1.0 markup -->
<body lang="en">
	<p id="target">this will be red in IE 7, green in other browsers</p>
</body>

/* use this to target modern browsers: Mozilla, Safari, Konqueror, Opera 9 and IE7 */
p#target {
	color: red; 
	}

/* use :lang to filter IE & Safari - applies to all other modern browsers */
*:lang(en) p#target {     
	color: green !important;
	}

/* use this to targets Safari, whether target is empty or not */
p#target:empty {        
	color: green !important;
	}

Filter IE 7 via the attr hack

Last but certainly not least is the minimized attribute hack. This method of filtering IE 7 works only in HTML documents. As with the previous two hacks, this method hides CSS from IE 7 using two different rules:

<!-- HMTL markup -->
<input id="attrhack" disabled />
<p>this will be red in IE 7, green in other browsers</p>

/* this sets the paragraph color to red for all browsers */
p {
	color: red;
	}

/* this sets the paragraph color to green for Firefox, Safari, and Konqueror */
#attrhack[disabled=""]+p {
	color: green;
	}

/* this sets the paragraph color to green for Opera */
#attrhack[disabled="true"]+p {
	color: green;
	}

Next up..

Next in the CSS Hackz Series: Targeting and Filtering Firefox and Opera!

Don’t miss it!

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.