Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
Tutorial Details
- Difficulty: Beginner
- Length: 4 Minutes
- Program: CSS
Two months ago, I, in a video quick tip, demonstrated how to use the underscore and star hacks to target Internet Explorer 6 and 7 in your stylesheets. In today’s quick tip, we’ll take things one step further, as we introduce a new hack that targets IE8 and below as well. It should be noted that this is not a best practice, and conditional comments should be used instead 98% of the time. With that said, it’s always important to know what you can do – plus it’s fun, right?
IE8 and Below
The key to targeting Internet Explorer 8 and below, with a hack, is to append “\9″ to the end of your style. For example:
body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
}
It’s important to note that it must be “\9″. Unfortunately you can’t replace this with something along the lines of “\IE”, like I attempted to do so. Even “\8″ won’t work; it must be “\9″.
IE7 and Below
As we learned in the quick tip from January, we can use the * symbol to target IE7 and below, like so:
body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
}
IE6
Lastly, we have the underscore hack, which most designers are familiar with by now. Rather than the * symbol, we use the underscore. This will target only Internet Explorer 6.
body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
A Note About CSS Hacks
It's worth noting that I'm not advocating the use of hacks in your stylesheets in any way. On the contrary, you should almost always use conditional comments. However, that doesn't mean that it isn't helpful to know what you can technically get away with, whether it be for debugging, or showing off to your friends!
The biggest concern is that hacks aren't future proof, at least not really. For example, what if, with the release of Firefox 4, they, too, recognized properties prepended with the * hack. They probably never would for compatibility reasons, however, if they did, that could potentially ruin a portion of your layout. Ultimately, just be wise when using hacks. If you only need to change one or two properties to make IE6 happy, then I don't see any harm in using the underscore hack directly in your stylesheet. The world won't end. However, if there are a handful of changes, be sure to use conditional comments!
<!--[if lte IE 7]> Make IE7 happy. <![endif]-->
Thanks for reading and watching!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
It is not obvious but what I think is happening in IE 8 and below is they are converting \9 to its literal meaning, a tab. The tab is 9 in the ASCII table. In turn IE trims off the whitespace (tab) so it only sees “red” while other browsers see “red\9″. Unfortunate the specs do not indicate if escape codes should or should not be transformed in non-string literals
Alright, Firefox does turn “\9″ into a “tab” but it does not trim whitespace.
This is the error it gave:
Warning: Expected color but found ‘red ‘. Error in parsing value for ‘color’. Declaration dropped.
I would think trimming whitespace would be done…
It probably trims white-space first, then does the conversion – Likely on purpose.
Great tips, found these really handy
Hi Sir,
ple sir aap ek page main browser capbility kaise use hota IE 6,7,8,9 & then mozilla, suffaree, opera, ko kaise html page ke under use karte hai .
ple sir
thnaks
Sir
Good top jeff
@Vinay Kumar
app edherse http://www.my-debugbar.com/wiki/IETester/HomePage IETester download kar lijiye. Isko dekaar ap saab Internet Explorer support check kar sakte
good luck
Sorry
Very very good tip jeffrey
yea
HAHAHAHA
In defence of CSS hacks, they avoid the extra HTTP request for an IE-only stylesheet (a performance cost); and they keep related code in one place, making maintenance easier.
That’s why Yahoo prefers CSS hacks over conditional comments. See around 1:07:00 in this video: http://video.yahoo.com/watch/4671445/12486762
The * and _ hacks are stable, since they’ve been fixed in IE8. However, it’s unknown whether this new IE8 hack is stable, because we don’t know whether IE9 will apply it. Using this hack may cause IE9 to be tarred with the same brush.
Being pragmatic, however, I think I’ll just use the hack and see what happens when IE9 comes out. I prefer this to the performance hit of an extra HTTP request in the [head]. Thankfully, it’s rare that IE8 needs a hack anyway.
Thank you very much! :)
Great tips! Just to add, color:#000000/; targets only IE 8.
Despite the invalidity of the css, there are circumstances where conditional comments cannot be used. I worked at a company who’s cms used anything within [ and ] as a means of calling part of the cms, and thus, it would break a conditional comment. as a last resort, I added a *width: to my stylesheet to fix the one bug ie 7 and 6 had with min-width. If conditionals are available though, I would never make invalid css.
Great tip.
To use conditional comments CSS should be placed in HTML file, since conditional comments work only with HTML, NOT CSS.
Also I tried \9 hack for font-family option and it didn’t work. I guess most of you know, that Calibri font exists mostly under Windows platforms so I tried to escape it with ‘\9′ for all IE versions, but it didn’t work. FireFox recognized it without a trouble.
This is exactly what happened to me, that’s why I replied to this thread below.
Thank you! just what i needed
And what about IE 9 ?
Does it fail as others do ?
I hope it has better defence than others against CSS hacks.
The best trick ever!!!!!!! Thank you
nice
This has been really helpful! Thanks for sharing.
\9 sometimes doesn’t work, instead you’d need to use “/ !important”, for example:
p { font-family: Arial / !important; }
It’d be great if one could edit their posts and not have to double post.
This thing is not picking up the syntaxis:
p { font-family: Arial \ 0 / !important; }
No spaces between the “\ 0 /”
This works well..I tried it :) Much handy..
Thanks a lot
You are a legend
Cheers
Hasn
Awesome! Still learning about IE, after all these miserable years… :-)
One more, this will target IE7 only:
#color: red;
On the standards-note, I now use the HTML5 Boilerplate (http://html5boilerplate.com/) approach on ALL sites I develop. So much easier, and cleaner…
Cheers,
Atg
Great tips! Thank you!
this is ok but we need more examples on defferent concepts like compatiability for height ,width,px,%,font etc
For the one that was wondering. The problem with “\9″ is that it targets ie9 and below. To be able to solve this I found that this worked perfectly:
background: #ee3e64; /* all browsers */
background: #0000ff\9; /* targets ie9 and below*/
background: #eee/; /* targets ie8 and below*/
*background: #00ff00; /* targets ie7 and below*/
_background: #ff0000; /* targets ie6*/
So to target ie8 and below instead of using “\9″ I recommend using “/”. My two cents…
Javier
life saver, thanks
thanks for the tip! ie 7 and 8 where driving me nutzz!!
As others have pointed out, this article is inaccurate: the “\9″ hack also applies to IE9/10 (i.e., all IE) – I’ve just tested with various rules in IE v9.0.8112.16421 and the IE10 platform preview (latter via IETester). I *thought* I saw this working previously, so it’s possible MS updated IE9′s handling to be consistent with IE8?
BTW – Roy/Javier’s “/;” hack (above) is ignored by all IE (6-10, as well as FF) for me, so doesn’t work. UPDATE: Ah OK – it’s meant to read “\0/” but this comment system strips “\0″ (I entered the backslash as & #92;). Interestingly, this ONLY applies to IE8, not IE7 and below, or IE9+ – that means to target IE8 and below you’d need a duplicate rule :S
Cheers, Ben
Hi Jeff, thanks for the good articles…Mark
Many thanks for this. Much more economic than using hacks like
head:first-child+body
Would be nicer not to have to use hacks at all but that’s another discussion
Cheers!
OMG, thanks a lot. I had to say something, I was crazy about it, I didn’t find help anywhere but here…
God bless you!
Hi,
How to make a template working in IE8 & IE9 to work in IE6 and IE7 ?
I have page rendering issues in IE6 & IE7 and I have many CSS properties to deal with how can i make it work?
Kindly advise me. I am a college student working on my current project.. Need a help……
Hi Scott Ellis,
I have a problem while i am designing my web page with image as a button, i was created my menu buttons with images and then i keep a link to this image. when i was run it in Mozilla Firefox and googleCrom it seems good but in internet the image is looking with blue boarder.so, how to remove that linking color in internet browser window..
Well, at the moment of typing this comment, April 4 of 2012, there doesn’t seem to be an ONLY IE8 CSS hack.
The ones I’ve used and seen around are picked up by IE9 as well.
I’ve used:
• color: green\9;
• color: green/;
• color: green/ !important;
• color/*\**/: green\9;
None of these work ONLY in IE8 :(
This thing strips out the code, so the examples above are incomplete.
Hopefully these get posted right:
• color: green\9;
• color: green\ 0 /;
• color: green\ 0 / !important;
• color/*\**/: green\9;
None of these work, dont waste your time
Hey,
New at coding but, I needed a hack of some sort to alleviate an ie issue.
Your \9 worked great but, it resulted in the problem now occurring in firefox.
The issue was auto centering the wrapper on the screen.
#wrapper {
background-color: #B3EE5C;
padding: 10px;
width: 860px;
margin-right: auto;
margin-left: auto;
}
I placed the \9 directly after auto on both margins.
Can I have it both ways? correct on ie and firefox?
Hi, I’ve searched advice to this from everywhere without the result:
I made Joomla-webpage, and template to it with Artisteer. Artisteer made automaticly template.css, template.ie6.css and template.ie7.css. Now I noticed that in ie8 few background-colours have changed from white to blue. I have already made changes to ie6.css and ie7.css so their colours went right, but where do I do to changes now, when I don’t have ie8.css? (And apparently, I cant add new template.ie8.css to Joomla..)
I would be VERY grateful from answers! (And sorry about my bad english)