Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

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:

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 = Fullstack Developer. Book Author. Teacher. Human Being.
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »

15 responses to “CSS Hackz Series: Targeting and Filtering Internet Explorer 7”

  1. @Andy Mantell

    I’m sorry, but I’m not going to create a whole new stylesheet just for once piece of padding that IE7 isn’t picking up properly. These targeted selectors are very useful in that respect.

    Obviously if you open a page in an IE browser and it’s TOTALLY wrong, then conditional stylesheets are the way forward, but for just one attribute that won’t budge, you can excuse these!

    Thanks for the article, Perishable, most useful.

  2. Andy Mantell 2009/01/25 3:09 am

    @Jasper

    I see your point, but personally I don’t mind lumbering IE users with one *small* extra http request in order to avoid using a “hack”. It’s just the way I prefer to do things I think, mostly the things that I find going into my IE stylesheet are some alpha png filters for IE6 and a few “zoom : 1” to trigger hasLayout – conditional stylesheets allow me to keep all of that kind of thing in one place rather than mixed in with my other css which suits me just fine :-)

  3. @Andy Mantell

    I definitely agree for things that are innately IE specific, but when it’s putting margin on something that IE is ignoring for whatever reason, it makes more sense to me to keep it together using these selectors

    As with so many things, it’s whatever makes most sense to the developer. I definitely don’t think there’s a right or wrong way to do this, as long as you’re consistent throughout whatever you’re doing.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.