Correct way to use Modernizr to detect IE?

by

Modernizr doesn’t detect browsers as such, it detects which feature and capability are present and this is the whole jist of what it’s trying to do.

You could try hooking in a simple detection script like this and then using it to make your choice. I’ve included Version Detection as well just in case that’s needed. If you only want to check of any version of IE you could just look for the navigator.userAgent having a value of “MSIE”.

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

You can then simply check for: 

BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. Menu does not align correctly in Safari
  3. CSS technique for a horizontal line with words in the middle
  4. css ‘pointer-events’ property alternative for IE
  5. Browsers’ default CSS for HTML elements
  6. What’s the difference between disabled=”disabled” and readonly=”readonly” for HTML form input fields?
  7. How to align checkboxes and their labels consistently cross-browsers
  8. What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?
  9. How can I draw vertical text with CSS cross-browser?
  10. Remove white space above and below large text in an inline-block element
  11. How to make HTML Text unselectable [duplicate]
  12. Flexbox and Internet Explorer 11 (display:flex in ?)
  13. Button inside of anchor link works in Firefox but not in Internet Explorer?
  14. Should PUT and DELETE be used in forms?
  15. Flexbox alternative for IE9
  16. local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
  17. Is cross-origin postMessage broken in IE10?
  18. Setting a width and height on an A tag
  19. Image scaling causes poor quality in firefox/internet explorer but not chrome
  20. Fallback for CSS attributes without unit
  21. How to detect HTML 5 compatibility in browser
  22. Anchor tags not working in chrome when using #
  23. HTML5 audio not working on Firefox
  24. Extra space under textarea, differs along browsers
  25. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  26. Cross-browser link to file on local system
  27. Zoom changes the design layout
  28. Cross browser method to fit a child div to its parent’s width
  29. IE Compatibility Mode: ‘X-UA-Compatible’ tag ‘Edge’
  30. Which browsers support data URIs and since which version?

Leave a Comment