Laser Targeting IE with WordPress
Hey Guys,
It’s been a good few months before I’ve posted anything, mainly because I have a new job and client work is taking up all my evenings. I still have to edit out my ums and ars quite a bit before I can publish a video unfortunately so I can’t quickly publish as I’d like.
I thought I’d write some really short posts for now instead, seen as I’m learning of tonne of new stuff.
Here is a way to finely target IE to your heart’s content in WordPress (but you could easily adapt for plain HTML).
<!--[if IE 7 ]><html <?php language_attributes(); ?> class="no-js ie ie7 ltie8 ltie9"><![endif]-->
<!--[if IE 8 ]><html <?php language_attributes(); ?> class="no-js ie gtie7 ie8 ltie9"><![endif]-->
<!--[if IE 9 ]><html <?php language_attributes(); ?> class="no-js ie gtie7 gtie8 ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js gtie7 gtie8 gtie9 modern-browser"> <!--<![endif]-->
This method adds a loads of classes that you can use to target IE after you’ve targeted normal browsers.
Example
In the example below I know that when I move the nav around it messes up in Internet Explorer 7. This is probably a bug that I would rather not waste time fixing, choosing to dedicate my time to working on advanced CSS3 for modern browsers.
Normally I would write two sets of rules (one for normal browsers, and one to neutralise IE7), but with our extensive targeting classes I can simply target browsers outside and above IE7 using the gtie7 (greater than IE7) rule.
.gtie7 #nav {
right: 440px;
top: 26px;
}
It’s important to note that these classes are more for targeting buggy behaviour. If you’re looking to change layout for less capable browsers then consider using feature detection with Modernizr.