Discover Quirks Mode in IE

Question

I am working on modernizing an older SAAS software. I am their first front end person. They currently only support older IE browsers - and tell their users to turn on quirks mode in newer IE browsers to their software still works.

During the slow process of modernizing I still need those users software to work and not fall apart.

Is there a conditional comment, javascript or other functionality that could let me on the front end know that the browser has been set to quirks mode manually?

I don't want to turn it off, as it is making other parts of the system work, I just need to be able to add a quirks mode to the html tag so that I can work out the kinks in css.

Thanks in advance.

---

Edit

OK, I have a js solution, well almost... This will give me an alert every time, but will only add the class to the html when I manually change the mode in ie. Any ideas?

$(document).ready(function() {
    var quirksMode = (document.compatMode == 'BackCompat');
    var isIE = ($('html').hasClass('ie'));
    if ( quirksMode && isIE ) {
        $('html').addClass('quirks');
            alert('IE Quirks');
        }
});

---

OK, I also need to find if they are in Document Mode IE 7 Standard manually, I know this is a mess, but they need it and I think it's important enough to make this happen. I am having the same issue with it not putting the class on unless I am changing the stuff manually, not just on load. Here is this code... it's in the same document ready from above.

if ( document.documentMode == 7) {
    $('html').addClass('ie7_standard');
    alert('IE 7 Mode');
};

Answer 1

var quirksMode = (document.compatMode == 'BackCompat');
var isIE = ($('html').hasClass('ie'));
if ( quirksMode && isIE ) {
    $('html').addClass('quirks');
};
if ( document.documentMode == 7) {
    $('html').addClass('ie7_standard');
};

This solves this issue. It adds a class to html if you have Quirks mode in IE or IE7 Standards Document Mode set manually.

F12 in IE won't always show the new class name, but if you have css tied to that class, it will function.

Thanks for your help everyone!

I used this question (How to detect Render Mode of browser for current page?) as a starting point, but it seemed to be slightly outdated.