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
Nice,
i was looking for a hack to target IE8 for a while, but thoose hacks are really confusing,
currently i’m using conditional comments and they are better
i just add
after body
and
before i close it
and i just use
.ie6 .element{}
.ie7 .element{}
.ie8 .element{}
much better
Why not use valid child css selectors to target IE instead?
What’s the advantage? It’s still a hack right?
like delphiki said and it keeps the whole stylesheet valid
Because sometimes, you just don’t want to import another css file just for one or two properties.
Agreed. Always best to cut down as much as possible on the http requests. Especially on a budget server.
Yea i much agree, however unless u catalogue ur fixes correctly in one place it can be very difficult to go back into the css at a later date xD
Just use jQuery .browser() to add the browser name as an id to the body tag and use that in CSS.
Valid html, css, and javascript.
Montana, using JavaScript to target browsers that those with JavaScript disabled..
love it, thanks
Great reminder. Thanks.
Btw : _property and -property both work for IE6 (and below).
screenr please.. youtube is a trouble here
Agreed
Hi Jeffrey,
Nice little tut once again.
I have done a few little sites for Yahoo! and they actually want these hacks to keep the file size of the whole site low so you don’t need to download multiple stylesheets. I originally started with the conditional comments but because I was doing it for a region that is still predominantly on dial-up we needed to make the whole site as fast as possible.
So it defiantly is handy to know these little ie hacks.
Cool tutorial.
Look forward to your Titanium tutorial. When are you going to publish it?
The funniest thing, that I remember other tut, where there where only 2 characters for IE6 and IE7 as I recall. Yep. Here it is: http://j.mp/a2lF6k.
And also one specific comment left by ziggidy: “If Microsoft keeps coming out with new browsers, they are going to run out of special characters to target their next browsers.” So +1 to needed chars by MS…XD
That’s very useful tips
Thanks
That ‘Note about CSS Hacks’ should be at the top, in bold.
There are rare cases when you need to target only IE for CSS (read: RARE!). Teaching new web developers hacks promotes bad, lazy habits. If you write semantic markup and use css rules properly, it will work in IE without any extra effort.
I am having troble with youtube what happen to blip tv?
but i enjoyed the writen tut thanks jeff keep it up!
For me CSS Hacks for IE are evil … how can You be sure that someday M$ don’t make patch fixing such CSS interpertation ?
I prefeer to code in such way, than each browser will display it properly. I don’t care to much for IE6 – just providing maximum readability with low time costs.
For me – it’s better to just plug IE7.js or IE8.js for IE’s – it fixing most of problems with those browsers.
The only “hack” which i use is !important trick (but this tick is CSS valid)
It’s a pretty safe bet that Microsoft aren’t going to be making engine patches for the older versions of IE. They incorporated the old engines in IE8 and added internal engine switching, that’s a very clear indication of how they are managing this going forward.
I don’t agree with your use of the IE .js solutions for enabling CSS “support” in IE. Using a heavy behavioural library for affecting presentation is strange, don’t you think?. And what about users without JS enabled?
I agree CSS hacks are evil but unfortunatly sometimes they are required. I’m not a fan of using a .js file to fix problems as that leaves problems for users that aren’t JS enabled.
I don’t think anyone likes IE6 anymore but again for certain projects (if not most) I am required to design for it.
One day we’ll all live in one happy web design world (i hope!).
Hey I got a bad news! its horrible.. i found government department’s computer still use IE5..
That’s very useful tips!
Thanks
Wow.. thats a great post…
cHeErZzZz \m/
I’d really recommend targetting IE6 / 7 with the star-html hack:
* html #someItem { .. } /* IE6 */
*+html #someItem { .. } /* IE7 */
Or using conditional comments. Abusing parser errors is much more error prone, and likely to clash with future browsers.
Useful tips, that’s fo sure. ‘Tis a handy thing to have these all in one place. Hopefully this page will get some google juice and make these easier to find.
That said, I’d recommend moving the “A Note About CSS Hacks” to the top of the article. These kinds of CSS hacks are are nasty :-) If you own the page structure they’re not necessary. If you don’t have the option of conditional comments then they are absolute gold, but they’re a maintenance nightmare otherwise.
Again!? Jesus… if you want to post hacks ( again! ) … please post valid hacks…. at least people won’t have to be worried about W3C…
For IE7: *+html CSSproperty
For IE6: * html CSSproperty
…
People shouldn’t be worried about W3C anyhow. Where’s it’s considered valid or not is moot. It’s still a hack.
Moot? “…what if, with the release of Firefox 4, they, too, recognized properties prepended with the * hack”?
Whereas * html is valid and will always work for ONLY IE6 unless an upcoming browser decides to reinterpret as being a child element of something else. In which case it would really be its fault if the site breaks.
Besides, people tend to be more impressed by your website if you can say “Valid CSS2!” regardless of whether you’re using hacks or not.
Okay, new stupids “microsoft” hacks spotted!
I think this hack: ” _color: #ff017d\*LMAOONW3C ” will be present in IE9.
That is a very handy browser hack.
That’s very handy. I find myself only using 1 or 2 things for IE these days for some smaller sites of mine and I’d rather use these than importing an entire new stylesheet. Thanks for the tip. I’ve really enjoyed the tutorials on this site.
Another hack to target another IE browser. Good to know for fun sake.
One of the things I’ve been doing lately is targeting a single stylesheet (ie.css) for all Internet Explorer broswers using conditional comments. Depending on the complexity of the design, I usually only need to throw one or two custom styles in this stylesheet. However, sometimes I need more styles targeting IE and I use these types of hacks to within ie.css to target the version of IE that is giving me problems.
Not the safest way, but when IE doesn’t play fair I don’t feel the need to be fair to it.
There is no “right” way to style things for IE. You have to use “hacks” or targeted styles because that is THE ONLY WAY that your page will look decent cross browser.
People that complain about this “not being valid” don’t have any experience with corporate websites where things just have to work. They don’t care how. They don’t care why. They just care if they open the site in IE6 and it looks like the mock up the design team came up with.
Yes Dave you are right. I agree with you.
Dave’s last paragraph is dead on. I end up only using one or two, but we are already using about 6 style sheets on our templated system, our back-end guys are not about to stop what they are doing to add a css file that has one maybe 2 rules in them.
It needs to work, and I don’t care how you do it is the motto in corporate land.
I think it’s about strategic decisions you can discuss with your business customer upfront.
If I say to a customer:
“I suggest IE6 support via JavaScript only. Only 30% of internet users have IE6 and of those only 1% have JavaScript turned off. So 99.7% of internet users will see a correct page, and the 0.3% rest probably sit in some government institutions using ancient hardware and should not visit your site during office hours anyway.
What you get as a reward is cost efficiency in development and maintenance of your site, you save REAL money.”
What i usually get as a reply is a simple “OK, let’s do it that way!”
Don’t try to please “stupid” customers, educate them. You are the expert, they trust you!
Maybe I’m missing something here… can anyone give an example of when a hack like this would be useful? What’s the purpose of this type of targeting, apart from fixing IE margin styling, etc.?
\9; is sooo dangerous. Hackers can enter your css through the \9 (they call it a pipe even though it’s not a pipe (|). Hackers will enter your css and then use the power of IE8 (or IE9 since some hackers have managed to get this beta version on their computer) to yield hell on you and your laptop or PC. It’s better to basically insert another type of hack between the css and the enduser browser in order to prevent hack attempts against you and your laptop of pc.
Wait.. what?
I see mimimi people!
I don’t see using hacks as a bad thing.
And doesn’t conditional stylesheet for IE just mean +1 http request?
I think its much better to use multiple style sheet, I think it work better and its easy to manage, that way we can use feature of new browser.
thanks for the TIP
These hacks are very handy for your day to day development needs, then you can move them out to conditional style sheets before you publish.
Hi! I agree that using conditional comments is the best idea :) But yes it’s helpful to know tricks every now and then.
For anyone searching for tips on how to deal with IE6 specific bugs, please check out my blog. I covered 15 IE6 bugs that I think are pretty annoying. Here is the link:
http://stylisticweb.com/blog/15-ie6-bugs-and-simple-solutions
There is a much better way to target your stylesheets:
CSS Browser Selector
http://rafael.adm.br/css_browser_selector/
Puts a style in the HTML tag, that targets many browsers (listed below), and validates. the selector has versions in JS, PHP, Ruby on Rails, and WordPress variations.
can write styles specifically for all these browsers:
* ie – Internet Explorer (All versions)
* ie8 – Internet Explorer 8.x
* ie7 – Internet Explorer 7.x
* ie6 – Internet Explorer 6.x
* ie5 – Internet Explorer 5.x
* gecko – Mozilla, Firefox (all versions), Camino
* ff2 – Firefox 2
* ff3 – Firefox 3
* ff3_5 – Firefox 3.5 new
* opera – Opera (All versions)
* opera8 – Opera 8.x
* opera9 – Opera 9.x
* opera10 – Opera 10.x
* konqueror – Konqueror
* webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
* safari3 – Safari 3.x
* chrome – Google Chrome
* iron – SRWare Iron new
Thanks, these tips are very useful
If I have to style something specifically for IE7 and under, I use this:
padding: 0 0 !ie;
Does anyone else use that one? Cause I was under the impression that 8 ignores it. If I am wrong please let me know.
Most of the problems come into play with margins, and display: inline usually takes care of that.
I enjoyed your previous article on this topic. I find myself using the hacks in development to I can make the changes rather fast, then move the browser specific hacks to their respective css files that I target with conditional comments towards the end of development. Glad to see there is a way to target soley IE8. I would love to know a way, if there is one, to target Google Chrome. I’m using JS to browser detect now, but it would be nice if there was a way with out JS.
So I was totally more intrigued by the IETester application. I had no idea that existed and I completely just downloaded it.
Nice CSS hacks btw.
IE6, IE7 or previous versions are now available as standalone at this URL : http://finalbuilds.edskes.net/iecollection.htm . On my personal blog, I searched several ways to browser test websites. To read more : http://www.otygblodhemn.com/blodhemn/20100126-1402/web/different-ways-to-browser-test-your-website
Man, this is just twisted! I wonder who came up with that? And it really works only with “\9″ ;x.
I’m one for not using hacks unless there truly isn’t a standard way of styling something, and that would be very rare for me. I used to use hacks, but with experience I’ve been able to solve nearly all of my issues with good solid CSS.
Very useful! Thanks :)
Hahaha, IE has always been the special child.
“IE, do you want a \9 at the end of your style? Of course you do, mommy loves you so muuuch!”
I like to use this method with conditional comments rather than create a extra stylesheet I just do the following.
Text
Inside layout.css
#ElementID {
float: left; margin: 20px 20px 20px 20px;
}
#IE6 #ElementID {
display: inline;
}
——————————
Prefer this to using hackings and easier to remember.
Only one document for all styles. But adds extra markup to HTML document.
Or how about using * html “hack” (which is a valid CSS selector, and subsequently keeps your CSS valid), then using the “X-UA-Compatible” meta tag in the header to force IE8 into compatibility mode?
Plus, haven’t you heard? IE6 died after a work-related fatal accident at Mountain View, California: http://ie6funeral.com/ which means that we should never have to write CSS for it ever again…
NEVER use these hacks. ALWAYS use conditional comments.
Nuff said.
Why isn’t there a Jquery plugin which fixes all IE6/7 and 8 problems ? This would be great. Just import Jquery and everything is cross-browser compatible.
I made a conscious decision a while back to stop wasting dev time on IE bugs, and started using dean edwards’s ie8.js and ie7-squish.js scripts, which flatten all the regulars (peekaboo, double margins etc), plus all the haslayout rubbish, and enable alpha transparency for IE5+. I also run a script that sniffs for IE7 and below and throws up a “please upgrade your browser” bar at the top of the screen on every page load. I occasionally (rarely) pull in a conditional sheet for ie7 with maybe one or two rules in it, but that’s about all that’s required.
As for IE6 I dropped support a year ago. I think if a visitor wants to use current and previous versions of IE they have to accept the performance hit as the script loads, and if they choose to remain with IE6 that’s their problem. I appreciate that some intranets are built around heavily depricated and proprietary coding, and if I can’t convince them to move to standards compliance post-IE6, I’ll turn down the gig. I know this may not be a practical position / solution for many, but for me it’s working out fine.
@aljuk:
Thanks for that. Saves a lot of work.
I use three methods for IE Hacks according to needs.
If I need one ou two changes for IE, I use in CSS code like .class {_color:red;} or .class {|color:red;} or .class {color\9:red;} but CSS code is no more W3C valid.
If IE needs lots of changes, I use conditional comments.
At last, I use a Java Script function which detects which browser is. After, in my function I tell if this browser is IE6 the class .ie6 exists. In my CSS code, I can now add .ie6 before any .class or any #id to specify that this rule affects only IE6.
Pretty cool, It’s been a long time since I used a hack instead of just including a conditional so its interesting to see it for all versions of IE. Good one.
P.S.
Looking forward to your iPhone app :)
I do really love this. Begin coding HTML , PHP and CSS . I start to code for IE :)
People.
Standards are trying to move forward. Don’t use hacks. You are defeating the point of valid markup and css.
Re: http requests, Inline styles save you http requests too, but you don’t use them (or you shouldn’t be).
@aljuk – That attitude punishes users who cannot upgrade their browsers and damages your clients business appearence. If you consider yourself a decent developer you should be supporting IE6 and 7. That’s it.
@Brad I tend to agree with you. Although I am passionate about web standards and semantic markup… If you are working for a company that targets people in their 60s+ with web sites and much of your users are still using IE 6 we can not drop support for it just yet.
It does no harm to use these hacks, punishing the user will not get them to switch. They do not know any better. Hell, many people don’t even know what a web browser is, they think it’s Google and they use both every day. We can not be stubborn in not supporting some legacy browsers. Especially where I am right now. Believe me I hate Internet Exploder!
I haven’t had any problems with IE8 yet, I do use a reset though. I’ve had to target IE7 and IE6 and still do. I just use these 2 hacks.
color:#c00; /* normal */
_color:#c00; /* IE 6*/
#color:#c00; /* IE 7 */
If (and I am not sure) IE7 uses the _ hack I am not sure, but if it does the # overwrites it because of the cascade. IE8 ignores both. As long as they are done in this order it works just fine. I do not believe IE 7′s hack will be removed and since IE 6 support is dropped it never will.
On the contrary, you should almost always use conditional comments.
Because this is the way Microsoft recommends to create specific stylesheets for each IE versions.
useful tutorial as per our latest requirements. thanks