Targeting IE7 using CSS

IE7 is still in beta but with things apparently being layout complete, this hack may stick around until final launch. It's a variation on the underscore hack.

Here's a quick example:

p
{
  border:1px solid green; /* works in all */
  *border:1px solid red; /* targets IE6 and 7 */
  _border:1px solid blue; /* targets IE6 */
}

Yes, this is invalid CSS and it might get fixed by the time IE7 hits the streets.

Published March 27, 2006 · Updated September 14, 2006
Categorized as HTML and CSS
Short URL: http://snook.ca/s/562

Conversation

29 Comments · RSS feed
Dustin Diaz said on March 27, 2006

shame on you for posting a hack :p

Kevin Navia said on March 27, 2006

I thought underscores are valid?

paul haine said on March 27, 2006

Underscores are valid, but it's the '*border' that is invalid.

Johan said on March 27, 2006

aint we all hackers of some sort ...
More IE7 exclusive filters from father BrotherCake

Fredrik W said on March 27, 2006

That's great, thanks for the tip!

Ben said on March 27, 2006

NO....
This is the correct situation to use valid "Conditional Comments"...

<style>p{border:1px solid green}</style>
<!--[if IE 7]><style>p{border:1px solid red}</style><![endif]-->
<!--[if lte IE 6]><style>p{border:1px solid blue}</style><![endif]-->

Ben said on March 27, 2006

As the comments in the example above were (rightly) ignored, more info here:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

Anne said on March 27, 2006

You mean they haven't fixed the the twenty-six variations on the subject?

Anne said on March 27, 2006

Actually, given that you can use them together there are a lot more variations possible. There are twenty-six single character prefixes you can use though.

Carl Camera said on March 27, 2006

The more I read about IE7-targeted hacks the more enamored I'm becoming with conditional comments. :-)

Tony Geer said on March 27, 2006

I've stopped using hacks, conditional comments all the way.

Eric Shepherd said on March 27, 2006

Conditional comments are fine, and I'm using them more and more. But, there are times when you are producing something quickly, and have only one or two rules that need modifying. In these cases, it saves time, and and extra stylesheet, to just use a simple hack.

The downside to the conditional comments is for those of us who aren't rich enough to have many virtual PCs, all IE installs refer to the same conditional comment (IE7 in my case). Hacks work when I'm running my IE5 install, CCs don't.

Alexander said on March 27, 2006

If everyone stopped with conditionalcomments and hacks for IE the developement of that browser would go alot faster, since users would have crappy websites the developers would be forced to make something that worked (since people would switch in great numbers).

michael said on March 27, 2006

there is a nice dream

Greg said on March 27, 2006

Alexander - That kind of thinking is very nice, but completely unpractical. I work for a company that makes sites that get millions of unique visitors every week. We need solutions that work, and sometimes work fast, which means we sometimes use hacks. In some cases we may have to go back and fix things later, but the cost of doing that vs. the cost of not getting something done in time makes the choice a no brainer.

Amrit said on March 28, 2006

My main concern is, will the hacks work once all the kinks are gone (supposedly) in IE7?

Alexander -- Ideally your solution should work but when visitors find crappy websites they often blame the web designers and the web masters, not the browsers. There are still very few people who are aware that browsers affect the way websites look. I haven't used IE for more than 2 years (I do test my clients' and my own websites in it) but more than 90% of my visitors use different variations of IE. Giving the crappy websites and telling them it's their browser's fault would be disastrous :-)

David Hammond said on May 27, 2006

An easy VALID option would be to just use *+html{} where you would normally use * html{}. *+html targets IE7 (possibly future versions as well) and currently no other browsers as far as I know.

I blogged about *+html and other hacks I discovered.

Jeff Croft said on October 10, 2006

I agree that conditional comments are the way to go, but there are situations when you simply can't use them (say, if you don't have access to the HTML in question). So, hacks like this are not useless. We should avoid them, but I'm still glad Jonathan posted this, because I'm sure it will come in handy someday.

In general, web standards people need to stop trying to be so absolute about everything. Anytime you say "you should never..." or "NO!" you might want check yourself.

Ciezarowe said on November 13, 2006

I absolutely with agree you, my website it is one example of create xhtml and CSS there respect norms W3C. But there are problems always with IE which reads CSS in another way that Firefox.
Thank you for your article very interesting.

Harry Moore said on November 20, 2006

Thanks for posting. I had one small area of a site taht was like 10px off if that and I couldn't get it trying 3 or 4 different ways. Found your site on a search and the * hack worked very nice. WHY CAN"T THEY JUST GET THE BOX MODEL RIGHT ??

Thanks again

Adam said on December 15, 2006

This post was about an IE7 character flaw that may be useful to some designers in certain situations. It was new to me and I'm sure will be quite helpful at some point. You people who are talking about conditional comments, save it for another thread, that's not what this is about. We all know about conditional comments but thanks for sharing.

Will Dayble said on December 18, 2006

I have a dreeeeeam, that one daaay... IE will go away... ooeeeoooo!

*pounding head against the desk furiously*

Andrea Bindi said on March 01, 2007

This is not valid CSS !
Shame on you!

BarnDog296 said on April 25, 2007

of course this is not Valid CSS, but what are we supposed to do? I am tired of this, I just finished up a site for FF and IE6 I look at it in IE7 and THIS is the crap I have to do...

I could build 3 completely different sites, 1 for each different browser if I wanted to... this is getting out of hand in the browser wars, im tired of this crap... cant we agree on SOME KIND of F-n standards?!

FettesPS said on June 07, 2007

In my opinion, conditional comments are NOT the way to go. My reasoning is that the whole purpose of CSS was to abstract styling from the HTML document and put it in it's own document. With conditional commenting you're forced to do extra styling in the HTML document, and that extra code can easily be over looked or forgotten.

MarshallSalinger said on June 13, 2007

Thanks for this code. It works like a charm and is so simple to remember.

Everyone who is gasping at the thought of this not being Valid CSS, need to read this article.
March to Your Own Standard

Mike D. said on December 17, 2008

Funny, I just discovered this today and the previous comment links to an article of mine. Serendipity. Being a huge fan of the underscore hack, I am now an even bigger fan of the asterisk hack! Well done... and hugely useful when wrangling form element css.

Ken V. said on January 22, 2009

IE should be abolished altogether.

I don't see why ppl get worked up and condemming over IE hacks, when they accomplish the exact same thing as conditionals but in less syntax.

Get Firefox, Chrome, Opera.

Einar Páll said on February 13, 2009

Perhaps not valid, but a timesaver until IE7 people get it right and understand what CSS is al abut.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.