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: