Cross Browser Compatibility Archives

OK. Let’s take a look at the IE changes over time. When we wanted to target IE browsers in order to use IE specific styles, we would normally create a CSS specific file(normally titled: ie.css) with the IE specific CSS styles. We would then use conditional commenting as such:

<!--- code for using different IE stylesheets --->
 
 <!--[if IE 8]>
       <link rel="stylesheet" type="text/css" href="http://test.com/css/ie8.css" />
 < ![endif]-->
 <!--[if IE 9]>
    	<link rel="stylesheet" type="text/css" href="http://test.com/css/ie.css" />
 < ![endif]-->

Then if the browser was IE, it would load the specific IE css file with the IE specific styles.

Then came the changes. IE 10 drops conditional commenting. Then IE 11 decides to change their User Agent. So now what?

In order to target IE and render the IE specific CSS styles we had to do a work around. So this is a quick example of how to accomplish this task in today’s modern IE browsers.

1. Create a small piece of JavaScript which I place in my header files which grabs the user agent of the browser.

<script type="text/javascript">
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);    
</script>

2. Then in my CSS style sheet, (you can create an IE only css file or just place the IE specific styles in your main css file) I create my specific styles for each of my IE Browsers. So as of today, I normally target back to IE 8. This is now my code looks like in my CSS style sheet. Unfortunately, these styles get loaded for every browser but the styles are only used for their specific IE versions. Normally, I usually do not have a lot of specific IE styles just a small amount so the little bit of extra payload is not that big of deal having to be loaded in every browser.

/* ==========================================================================
   IE STYLES
   ========================================================================== */
/************* IE 11 STYLES *****************/
html[data-useragent*='rv:11.0']  .socialmediaicons {
    width: 480px;
}

/************* IE 10 STYLES *****************/
html[data-useragent*='MSIE 10.0']  .socialmediaicons {
    width: 480px;
}

/************* IE 9 STYLES *****************/     
html[data-useragent*='MSIE 9.0']  .socialmediaicons {
    width: 480px;
}

/************* IE 8 STYLES *****************/
html[data-useragent*='MSIE 8.0']  .socialmediaicons {
    width: 480px;
    margin-right: 35px;
    margin-top: -50px !important;
}

Now the next big question is, what will the NEW Microsoft Edge browser have in store for us. No worries about the later versions of IE as they will still be around for some time in support of legacy software. So using the above solution will still be in play for a while.

Please feel to leave comments and let me know what you think or if you run into any issues.

Category: Cross Browser Compatibility

How to target IE / IE Specific CSS styles