load css style sheet based on IE document mode

Question

I'm building a website and I would like to include different versions of my style sheet based on the document mode the browser is in (not the browser mode).

For example of the documentmode = ie8 I might want to load main_ie8.css but if the documentmode = ie9 I might want to load main_ie9.css

I have a number of users that run IE9 in compatibility mode. This defaults the document mode to ie7 standards. I use the following meta tag to force the document mode to IE9 standards in IE9:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

The problem is the browser mode is still set to IE compatibility. So the user agent is still set to IE7.

Since there is no way on the server side to determine the document mode the browser is running in and conditional comments are also based on the browser mode not the document mode, how can I load my css files based on the document mode rather than the browser mode.

Is there any difference for you IE8 document mode, or just IE8? — Taron Mehrabyan, Feb 24 '14 at 19:30
Not sure what you are asking exactly. I don't think there is any different between IE8 document mode in IE8 and IE8 document mode in IE9. I could be wrong, but I believe the page should render the same in both cases? — kralco626, Feb 24 '14 at 19:34

Amar · Answer 1 · 2014-02-24T19:38:25.177

Use this code to detect browser mode and document mode.

var j = jQuery.noConflict();
j(document).ready(function(){
    /* detect usage of IE Developer Tools using different Mode for Browser and Document */
    if(j.browser.msie) {
        var browserVersion = j.browser.version.slice(0,j.browser.version.indexOf("."));
        var documentVersion = document.documentMode;
        }
    }
});

Send an ajax 'get' call to a sample.php script:

            if (window.XMLHttpRequest)
            {
              xmlhttp=new XMLHttpRequest();
            }
            else
            {
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //do the settings based on the response from php
                    /*you can echo the css  file name to be picked 

based
 on browser mode or document mode*/
                        var response=xmlhttp.responseText;
                    }
                }


xmlhttp.open("GET","http://<?php echo IP; ?>/yourapp/sample.php?mode="+,true);
            xmlhttp.send();

Hope it helps!

score 0 · Answer 2 · edited May 23 '17 at 12:14

You could run a conditional javascript that tests the document mode, then appends the css. Something like:

if (BrowserDetect.browser == 'Explorer')
{
    if (document.documentMode == 7 && BrowserDetect.version > 7)
    {
        // user is running IE in compatability mode
        // load special CSS
    }
}

Got this idea from a similar posts' answer at https://stackoverflow.com/a/13732003/3100667

If this is more of an issue of browser support for CSS styling, which it sounds like, you could also work around it by loading shims and polyfills to enable CSS3 support in older IE versions. The popular HTML5 Shiv is a good starting place.

A collection of other polyfills that may help fix a specific problem you're targeting is at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

score 0 · Answer 3 · answered Oct 23 '15 at 14:44

You can try conditional comments

http://www.quirksmode.org/css/condcom.html

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>

load css style sheet based on IE document mode

3 Answers3