IE8 compatibility mode, UserAgent, wrong CSS.. you got my point huh!

I am running IE8 on my Windows XP machine. I am building a website for one my clients, the project is going really well. I am working on adding browser specific CSS to my site using the Request.Browser class in ASP.NET. Things are looking absolutely beautiful in Firefox, Safari, Chrome ….. you name it. Opened IE8.. wonderful as usual. Clicked compatibility mode in IE8, so running IE7 technically, looks good again. Closed the IE8 instance, opened IE8 just to make sure things were ok, YAIEEEEEEEEEEEEEEEEEEE KARAMBAAAAAAAAAAAAA!!! Someone unleashed hell on my webpage. What happened!

They way I added browser specific CSS is in my code, detect the browser name and version and add css reference in the Head tag of the page. Now there is a situation where IE8 is in compatibility mode, but the UserAgent still has browser version of 8.0 in it, due to which in my case, the IE8 css was added in an IE7 scenario. The problem with my approach was I was trying to do everything on the server side. It happens so that to detect if a user has turned on Compatibility mode, we have to have some kind of client side scripting done. The magic property is document.documentMode, this value is probably only available in IE8 browser. For IE8, the value is “8”, for compatibility mode it is “7”. So one way would be to disable to IE8 css which is already added and add the IE7 css when the browser is in compatibility mode, like so,

 $(document).ready(function() {
if(document.documentMode == "7")
{
var head = document.getElementById('pageHead');
var linktg = document.createElement('link');
linktg.type = 'text/css';
linktg.rel = 'stylesheet';
linktg.href = 'MyStyle-IE7.css';
linktg.media = 'all';
head.appendChild(linktg);
$("link[href='MyStyle-IE8.css']").attr('disabled','true');
}
}

I read an article somewhere about “Letting Internet Explorer 6 die down for the Web to move on” or something like that. I wonder why not kill this whole Internet Explorer thing once in for all?

Happy Programming!

0 Comments:

Post a Comment