Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How to Target IE6, IE7, IE8, IE9, IE10 and IE11

by Durodola Ridwan | Friday, October 24, 2014 | | 19 Comments

It gets frustrating when different versions of Internet Explorer displays our web pages differently due to the inconsistent rendering engine.

Sometimes, we might just think tweaking our code to render the same across different browser version is not that important, but that's a wrong idea. Many users don’t care what browser they are using as long as it browses the internet. Sadly, most of these users are on IE7, IE8, and IE9 because that is what comes installed on their PC. Luckily there are now several ways of targeting IE.



Conditional Comments

The simplest and almost the best way to target Internet Explorer is through conditional statement. The basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.

Example:

<!--[if IE]>
<link href="ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE6]>
<style type="text/css">
/* styles for IE6 goes here */
</style>
<![endif]-->
<!--[if lt IE7]>
<style type="text/css">
/* styles for IE7 goes here */
</style>
<![endif]-->
<!--[if lte IE8]>
<style type="text/css">
/* styles for IE8 goes here */
</style>
<![endif]-->
<!--[if gt IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if gte IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if !IE]> -->
<style type="text/css">
/* styles goes here but should not appear in IE5-9 */
</style>
<!-- <![endif]-->


Note the special syntax:

  • <!--[if IE]> = all IE version
  • <!--[if IE9]> = IE9
  • <!--[if lt IE9]> = less than IE9
  • <!--[if lte IE9]> = less than or equal to IE9
  • <!--[if gt IE6]> = greater than IE6
  • <!--[if gte IE6]> = greater than or equal to IE6
  • <!--[if !IE]> -->  = content should appear in all browser except IE

Also, note that conditional comments were disabled in IE10+, so IE10 and up will not understand the test.


Conditional HTML Class

Another great way of targeting IE is to add a browser-unique class to the <html> element. Basicially, it checks if it is IE, then add a class to the html tag. So to target specific IE version, simply use the IE class as the parent selector (eg. .ie6, .ie7).

Example:

<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<!--[if !IE]><!--><html lang="en"><script>if(/*@cc_on!@*/false){document.documentElement.className+='ie10';}</script><!--<![endif]-->

As you might have noticed from the last line. Since IE10 does not support conditional statements, you can apply an ie10 class to the <html> element.

Then in your CSS you can strictly access your target browser, like so:

.ie6 {
    border:1px solid blue;
}
.ie7 {
    border:1px solid red;
}


CSS Hacks

With CSS hacks, you can target any IE version. Though, this method is not recommended because they are not valid CSS syntax. But if you only need to change one or two properties to make IE happy, then I don't see any harm in using the underscore or asterisk hack directly in your stylesheet. However, if there are a handful of changes, be sure to use conditional comments.

The logic is simple:

  • IE9, IE8 or below: to target Internet Explorer 9, 8 and below in CSS, append a backlash and 9 (\9) to the end of the style you want to apply.
  • IE7 or below: add an asterisk (*) before the CSS property.
  • IE6: add an underscore (_) before the property.

Example:

/* IE6 */
body { _color: blue; }

/* IE7, IE6 */
body { *color: blue; } /* or #color: blue */

/* IE9, IE8, IE7, IE6 */
body { color: blue\9; }

/* IE8, IE7 */
body { color/*\**/: blue\9; }

/* IE7, IE6 -- acts as an !important */
body { color: blue !ie; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}


The last CSS media query rules which target IE10 and IE11 is a valid CSS rule. Here’s the technique: we create a media query using -ms-high-contrast, in which you place your IE10+ specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE10+), it will only be parsed in Internet Explorer 10 and greater.

Hacking your CSS may seem a quick fix for getting your styles to work across browser types, but it can harm sometimes. Imagine if the new release of Firefox or Safari support properties prepended with the asterisk (*) hack. They probably never would for compatibility reasons, however, if they did, that could potentially ruin a portion of your layout. That's why I recommend the first two options.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

19 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. This was super helpful. Just saved me on a project at work. Stupid lack of conditional comment support. >.>

    ReplyDelete
  2. Packers and movers Noida @ http://www.noidapackers.co.in/
    packers and movers noida sector 12 @ http://www.noidapackers.co.in/
    packers and movers noida sector 53 @ http://www.noidapackers.co.in/
    packers and movers noida sector 51 @ http://www.noidapackers.co.in/
    packers and movers noida sector 50 @ http://www.noidapackers.co.in/
    packers and movers noida sector 49 @ http://www.noidapackers.co.in/
    packers and movers noida sector 41 @ http://www.noidapackers.co.in/
    packers and movers noida sector 39 @ http://www.noidapackers.co.in/
    packers and movers noida sector 62 @ http://www.noidapackers.co.in/
    packers and movers noida sector 61 @ http://www.noidapackers.co.in/

    ReplyDelete
  3. Like i only know that the latest was IE8 haha! too old for new updates in technology



    Heard about Olympia Kitchen Remodel

    ReplyDelete
  4. Demonstrat to them whole your products which must be moved to the new destination.

    Packers and Movers Bangalore @ http://www.11th.in/packers-and-movers-bangalore.html
    Packers and Movers Noida @ http://www.11th.in/packers-and-movers-noida.html
    Packers and Movers Ghaziabad @ http://www.11th.in/packers-and-movers-ghaziabad.html
    Packers and Movers Chennai @ http://www.11th.in/packers-and-movers-chennai.html

    ReplyDelete
  5. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people
    - fnaf

    ReplyDelete
  6. Thanks a lot for sharing. To get all the latest bollywood news,gossips and rumors,just check
    imo beta apk

    ReplyDelete
  7. To join the free games you go here. It will have a lot of great games for you that
    gun mayhem 3 | can your pet 2
    learn to fly 3 | happywheels
    tank trouble 3

    ReplyDelete

  8. http://getpackers.com/packers-and-movers-bangalore/
    http://getpackers.com/packers-and-movers-bangalore-to-hyderabad/
    http://getpackers.com/packers-and-movers-bangalore-to-kerala/
    http://getpackers.com/packers-and-movers-bangalore-to-gurgaon/






    ReplyDelete
  9. The Pangu is a Chinese programming team in the iOS community that developed the Pangu jailbreaking tools.These are tools that assist users in bypassing device restrictions and enabling root access to the iOS operating system.This permits the user to install applications and customizations typically unavailable through the official iOS App Store.
    Now to get Pangu Jailbreaking tools are so easy or free from CydiaNerd you can get Latest Pangu iOS 10 Jailbreak.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger