Latest TweetsGreat post about the latest power grab: www.eff.org/deeplinks/2018/09/…
Perishable Press

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!

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
Archives
15 responses
  1. Andy Mantell July 15, 2008 @ 10:36 am

    Why still talk about using “hacks” when microsoft present such a predictable, reliable alternative in conditional comments? I see little reason to use hacks when conditional comments do a much tidier job.

    Shouldn’t we be discouraging their use given the unpredictableness of their future behaviour? The effects of a given hack may vary wildly in future browsers since many exploit bugs in css parsing code. On the other hand, conditional comments aren’t suddenly going to behave differently unless microsoft is feeling particuarly stupid. (Incidentally, microsoft want to see the back of them too)

    What do you think? I mean, is there a valid use for them that I’ve missed? I appreciate that your are documenting all the different ways of targeting IE, I just think perhaps it needs to be noted that they aren’t the best way of doing things so that up-coming developers dont get the idea that they are ok?

    Cheers

    Andy

  2. Jeff Starr

    Yes, I completely agree, Andy. That is why I covered conditional comments before presenting the other methods in the article. Everything you say is true, however, as a matter of reference, I wanted to consolidate my growing collection of techniques for targeting and filtering IE7 into a single post. In fact, the entire CSS Hackz series is designed to do exactly that: bring all of the available techniques together for any given hack. In none of the hackz articles do I condone or condemn the use of any sort of hack. As strongly as I agree with your opinion, however, I feel that it is important to leave the decision whether or not to use hacks (of any sort) to other designers. Hopefully, “up-and-coming developers” will get the idea and come to their own conclusions.

  3. Useful tips there – I usually use a handful of hacks myself, and change code to simpler versions at times.

    I’m obsessive, so I usually manage to iron out all bugs, but Lord help me if I have to finish a project within a deadline. This post should help then – already bookmarked.

    And I’m submitting this to Stumble Upon too(and Design Float, if it hasn’t been already) -should help you get a few hundred visitors (sensible visitors, not the hypercharged creeps on Digg).

  4. Jeff Starr

    That is very kind of you Sumesh! I certainly appreciate it! Thank you :)

  5. A shorter way of targeting only IE7 via CSS is to use * + html {}. It can’t be combined with * html in a comma-delimited list to do rules for IE6 and IE7 but it’s still very useful and doesn’t take as long to type.

  6. Very interresting article. Thank you for sharing!

  7. @nick: that’s my method as well, and it is a time-saver… thanks for mentioning it!

    I guess it just wouldn’t be as fun if all the browsers treated our code the same, but I still dream about the day that it happens…

    Trav

  8. Jeff Starr

    @Nick: I missed that one! Thanks for pointing it out! ;)

  9. A very concise article that articulates “every possible” hack for IE. While I try to avoid hacks semantically, and to validate, many of these methods can save a lot of time and money. I don’t think most clients will mind if something’s not entirely “valid,” and meets their budget because of a few shortcuts.

  10. I’m afraid that no matter what I try:

    html>body { }

    Will NOT validate as valid CSS version 2 or 3, Yet it is the ONLY thing so far that gives me the result I need

    The hack:

    Certainly doesnt fool IE6 either.

    I am majorly dreading IE8 !

  11. Edit…..

    Your blog removed the code.

    The hack: was refering to the IF / ENDIF to target IE6 and below.
    It just doesnt work

  12. Jeff Starr

    Hi Rose, actually, conditional comments do work perfectly well in all supported versions of Internet Explorer. As long as they are implemented correctly, they will work flawlessly every time. For more information, check out the two links provided in the third paragraph of the article. Also, here is a conditional comment targeting IE6 and below:

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

    I hope that helps! :)

[ Comments are closed for this post ]