This is how I like to do in my projects, it may be or may be not the best solution but it works just fine for me, hope you’ll find it useful.
I find myself following these 2 rules :
* Is there a better approach in order to avoid specific ie version targeting?
* If ie specific styles are required, how can I avoid code scattering at all cost?
How to target ie6
Do you feel this sweet sensation of freedom…
How to target ie7
I use the _ safe css hack
.bob {
margin-top:10px; /* all browsers */
_margin-top:8px; /* ie7 only */
}
How to target ie8-
There’s a twisted use out there of the :not selector, it’s not supported by ie8- so the goal here is to FIRST define some minimum styles (at the end they’ll be for ie8 and ie7 only). Then put all your fancy css3 styles INSIDE this elem:not(#whateverDumbNameYouLike) { } because they’ll be applied on every browser EXCEPT ie8 and ie7 🙂 Nice trick.
.bob {
margin-top:8px; /* all browsers but at the end it's only for ie8-7 */
}
.bob:not(#foo) {
margin-top:10px; /* all browsers EXCEPT ie8-7 */
}
How to target ie9
Well I currently never had to deal with ie9 specific styles… Twitter Bootstrap uses the 9 hack, does it mean it’s safe for you to use in your projects? Don’t know 🙂 ie9 is quite robust so it’s easier to find better approaches.
Feature detection
If nothing of these solved my problem I usually give a chance to feature detection in javascript with Modernizr. Sometimes a simple if (Modernizr.backgroundsize) is easier and faster than struggling with this stupid css rules 😛
*cough cough*… and what then?
If I’m steel stuck?… Oh well I guess at this point the situation is already an epic fail so just sniffing the user agent with javascript would be “ok” … yes shame on me.
Other techniques
Paul Irish’s conditional html classes is so damn cool but using it on the <html> tag could be tricky, consider reading this and this carefully before using it in production. I found myself sometimes using this technique on the body tag but again it’s a bit risky, third party scripts/frameworks usually use the body tag to inject attributes and I just don’t know if it’s going to collide or not. So at the end I usually give up with this one. Sorry Paul, if one day you read this 🙂 and here’s a simplified version of the H5BP official one:
<!doctype html> <!--[if IE 7]> <html class="ie7" lang="en"> <![endif]--> <!--[if IE 8]> <html class="ie8" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--> <head> ...
Then you use it like this in your css:
.bob { margin-top:10px; }
.ie8 .bob { margin-top:8px; }
.ie7 .bob { margin-top:12px; }
Conditional stylesheets loading from the <head>
The good old way from the head works just fine but the point here is to avoid isolated pieces of css scattered in multiple files. So I usually never use it. Here’s how to do it:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="all.css">
<!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="ie8.css"><![endif]-->
</head>
...
Resources
- Find browser specific hacks: browserhacks.com
Awesome!! I’ve spent a lot of time today trying to get something that would just target IE8. The :not approach works very well. In fact it’s the only thing I could get to work. = a huuuuuuuuge relief. Cheers!!
Grant
Glad to here it! I like this technique too, it is a bit hard to read afterwards but I guess it’s ok 😛
Dude, you’re showing the IE6 underscore hack and suggesting usage for IE7.
I think this is what you meant:
.bob { margin-top:10px; /* all browsers */ _margin-top:8px; /* ie6 only */ *margin-top:8px; /* ie6 & ie7 only */ }