Question

Since jQuery.browser is deprecated and jQuery.support is the recommended tool to tackle browser issues, what’s the recommended way to handle the following problem?

The Fullscreen theme of the Galleria jquery plugin doesn’t work properly (wrong image positioning) in IE < 8 and in IE 8 and 9 compatibility view mode. Doctype is HTML 5, and turning off that mode with

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

does its job, but how do I use jQuery.support properly do check if the IE version is < 8 or the compatibility view is somehow still turned on (because then we use another theme for these users)?

Update: Here’s the code we use now (at the bottom of the html).

<script type="text/javascript">
    $(document).ready(function () {
        if ($.browser.msie && $.browser.version < 8) {
            Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
            /* ... */
            });
        } else {
            Galleria.loadTheme('js/galleria/themes/fullscreen/galleria.fullscreen.min.js');
            $("#gallery").galleria({
            /* ... */
            });
        }
    });

</script>

Answer 1

how do I use jQuery.support properly do check if the IE version is < 8 or the compatibility view is somehow still turned on?

jQuery.support isn’t designed to detect browser versions, but to detect specific browser bugs. If you can determine the source of this bug (possibly tested by the .boxModel property?), you could base your if-statement on that logic instead.

Feature-detection is more robust than simply detecting browser versions as the tests ideally will work against any browser that is buggy – not necessarily just those in the IE family.

If you don’t want to track down the source of that browser bug (and thus find the correct .support test), then this thread seems to give a slightly more “complete” test for browser version and compatbility mode detection.

Here’s the code from that thread:

isIE8CompatMode() {
    return $.browser.msie
        && $.browser.version == 7.0
        && document.documentMode
        && document.documentMode == 8;
}

And of course you’d probably want to modify this to use < and > tests.

It still relies on $.browser, but seems to do extra detection for compatibility mode as well (via the IE-specific document.documentMode property).