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.
Conversation
shame on you for posting a hack :p
I thought underscores are valid?
Underscores are valid, but it's the '*border' that is invalid.
aint we all hackers of some sort ...
More IE7 exclusive filters from father BrotherCake
That's great, thanks for the tip!
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]-->
As the comments in the example above were (rightly) ignored, more info here:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
You mean they haven't fixed the the twenty-six variations on the subject?
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.
The more I read about IE7-targeted hacks the more enamored I'm becoming with conditional comments. :-)
I've stopped using hacks, conditional comments all the way.
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.
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).
there is a nice dream
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.
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 :-)
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.
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.
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.
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
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.
I have a dreeeeeam, that one daaay... IE will go away... ooeeeoooo!
*pounding head against the desk furiously*
This is not valid CSS !
Shame on you!
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?!
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.
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
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.
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.
Perhaps not valid, but a timesaver until IE7 people get it right and understand what CSS is al abut.