CSS-Targeting-IE7
Well its here, and had been for a while. The long awaited IE7. Although I'm a big IE fan, you really can't beat the quality of it's even handlers and a number of other great aspects that makes IE the best platform for Web Applications, IE6 was getting a bit long in the tooth. So a big welcome to the new kid on the block IE7. Looks as though the poorer cousin has jumped on to the free media and publicity surrounding IE7's release, Mozilla have released FireFox 2. So welcome to both of these new browsers. Lets see how they go.
On to the topic. As bad as CSS hacks are, sometimes they are the faster route to a solution and when you're up against it you need to Get it out the door!
Target IE6 Only (well maybe older too!)
Most should already know of the "_" (underscore) hack. Any property with preceded by an underscore will be ignored by all other browsers, IE7, Firefox, Opera and that weak one :p Safari.
#myElement {
color:red;
_color:blue;
}
The CSS above will set the color of #myElement on all browsers to red. When the 3rd line is reached it's ignored by All but IE6.
Include both IE6 and IE7
Very similar to the IE underscore "hack" above we have the "*" (asterisk) method. This functions in the same way. As the "_" method with the exception that IE7 will process the property too.
#myElement{
color:red;
*color:blue;
}
The CSS above will set the color of #myElement on all browsers to red. When the 3rd line is reached it's ignored by All but IE6 and IE7.
ONLY IE7!
Thus far I've not discovered a simple and direct means to just target IE7, but wit the two above we can mix it up a bit.
#myElement{
color:red;
*color:green;
_color:blue;
}
The CSS above will set the color of #myElement on all browsers to red. When the 3rd line is reached it's ignored by All but IE6 and IE7. So at this point the color is set to green in IE7 and IE6, then the IE6 only hack is reached leaving IE7 green.
Conditional Comments
Of cause the preferred/standards compliant/valid/best (delete as applicable) approach is to use conditional comments, but I'm not going to cover that, already over discussed, topic. Checkout efnet's #javascript FAQ for more info.