In BBC News Visual Journalism we have to test 13 different setups of IE.
Test page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-language" content="<%= translations[vocab_dir].lang %>" />
<meta http-equiv="Content-Type" content="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<!--[if IE 7]>IE7<![endif]-->
<!--[if IE 8]>IE8<![endif]-->
<!--[if IE 9]>IE9<![endif]-->
<!--[if IE 10]>IE10<![endif]-->
<!--[if IE 11]>IE11<![endif]-->
<script>
window.alert('querySelector: ' + ('querySelector' in document));
window.alert('localStorage: ' + ('localStorage' in window));
window.alert('addEventListener: ' + ('addEventListener' in window));
window.alert(document.documentMode);
</script>
</html>
We're only interested in the default browser mode and the compatibility browser mode
| browser | browserMode | documentMode | UA string | conditional comment | Cuts the mustard * |
|---|---|---|---|---|---|
| IE8 | IE8 | 8 | MSIE 8.0 | 8 | false |
| IE8 | IE8 compat | 8 | MSIE 8.0 | 7 | false |
| IE9 | IE9 | 9 | MSIE 9.0 | 9 | true |
| IE9 | IE9 | 8 | MSIE 9.0 | 9 | false |
| IE9 | IE9 compat | 9 | MSIE 7.0 | 7 | true |
| IE9 | IE9 compat | 8 | MSIE 7.0 | 7 | false |
| IE10 | IE10 | 10 | MSIE 10.0 | N/A | true |
| IE10 | IE10 | 9 | MSIE 10.0 | 10 | true |
| IE10 | IE10 | 8 | MSIE 10.0 | 10 | false |
| IE10 | IE10 compat | 10 | MSIE 7.0 | N/A | true |
| IE10 | IE10 compat | 9 | MSIE 7.0 | 7 | true |
| IE10 | IE10 compat | 8 | MSIE 7.0 | 7 | false |
| IE11 | IE11 | 11 | rv:11.0 | N/A | true |
| IE11 | IE11 | 10 | MSIE 10.0 | N/A | true |
| IE11 | IE11 | 9 | MSIE 9.0 | 8 | true |
| IE11 | IE11 | 8 | MSIE 8.0 | 8 | false |
| IE11 | IE11 | 7 | MSIE 7.0 | 8 | false |
- cuts the mustard is a feature detection test that BBC News use to determine how modern a web browser is. If a browser passes then we load our JS application into the page, changing the basic page with only core content to a premium experience.
('querySelector' in document && 'localStorage' in window && 'addEventListener' in window)
All browsers except IE11, this tells the browser how to report itself as. It affects the UA string and in some versions what value conditional comments assert on.
IE11 has no browser mode, this is to reduce the complexity and would be a good thing if it didn't complicate a solution.
- default
- compatibility mode
- Internet Explorer 7 (only in IE8)
- user in drop down options
- developer in dev tools
- MS keep a list that you can subscribe to
Tells the browser what to act like, for example setting this to "IE8" will mean the document has no "addEventListener" method. However this doesn't always happen, I'm not sure if this is deliberate or a bug. Another example is setting IE8 to "IE7" documentMode, although IE7 doesn't support postMessage, its there in the API. However JSON is supported in IE8, but setting IE8 to "IE7" documentMode will throw an error if you try to use it.
The behaviour in IE11 is slightly different, setting this will change how the browser behaves AND reports itself as. This is much better than previous, as setting documentMode to "IE8" means the JavaScript API changes, the UA string reports as IE8, and the conditional comments report as IE8. Unfortunately IE11 has a bug where changing the documentMode to "IE7" or "IE8" or "IE9" will make the conditional comments report as IE8.
- the developer with the meta tag
<meta http-equiv="X-UA-Compatible" content="IE=8" /> - the developer in the dev tools
IE10 introduces "standards" and "quirks" which from what I can tell make no difference.
IE11 changes this again, but for the better just calls it "edge".
If you have set the meta tag <meta http-equiv="X-UA-Compatible" content="IE=8" /> then this will control the documentMode setting, putting a (default) label against the option you chose.
- IE11: edge, 10, 9, 8, 7, 5
- IE10: standards, quirks, Internet Explorer 9 standards, Internet Explorer 8 standards, Internet Explorer 7 standards, Internet Explorer 5 standards
- IE9: Internet Explorer 9 standards, Internet Explorer 8 standards, Internet Explorer 7 standards, Internet Explorer 5 standards
- IE8: Internet Explorer 8 standards, Internet Explorer 7 standards, Internet Explorer 5 standards
- IE11 has no compatibility mode, its simplified to just being documentMode
- IE11 has a bug where the conditional comments assert true to the value 8 when documentMode is set to 9 or below
- documentMode is detectable:
document.documentMode - compat mode changes how browser reports itself
- conditional comments work in IE10 when you set documentMode to anything other than "10", BUT they will assert true on the value "10"
- Don't decide to polyfill based on the UA. Instead detect for features first. Feature dectection is the only way to guarantee if the polyfill is required. All other ways: UA sniffing and conditional comments can't be trusted.
- If you decide you do need to make decisions based on the version of IE the user has, then use
document.documentMode. - The only time you should still sniff is with one special condition, you've feature detection tested and now you're left with trying to target IE7. As document.documentMode doesn't exist in IE7, if you need an
elseto target IE7 you will have to sniff.
Mark