Snippets

Ben Buchanan Conditional CSS injection for IE11

Created by Ben Buchanan last modified
1
2
3
4
5
6
7
8
9
<!-- Simpler but applies to both IE10 and IE11 -->
<script>
(function(){
    var uamatch = navigator.userAgent.match(/(trident(?=\/))\/?\s*([\d\.]+)/i) || [];
    if(/trident/i.test(uamatch[1])) {
        document.querySelector('head').innerHTML += '<link rel="stylesheet" href="ie10-and-ie11.css" type="text/css" />';
    }
})();
</script>
<!-- This script is slightly longer but *only* applies in IE11. Bit of extra faffing to avoid an error in IE10. -->
<script>
(function(){
    var ua = navigator.userAgent;
    var uamatch = ua.match(/(msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
	if(/trident/i.test(uamatch[1]) && parseInt(/\brv[ :]+(\d+)/g.exec(ua)[1], 10) === 11) {
        document.querySelector('head').innerHTML += '<link rel="stylesheet" href="ie11.css" type="text/css" />';
    }
})();
</script>
----
Note - these scripts were tested pretty minimally using IE11 and IE11-in-IE10-emulation on Windows 10. 
----

Why would you do such a thing?

Because IE11...

* Has not died in everyone's stats (hello to everyone out there in corporate SOE land! we love you, just not your browser!)
* Does not support @supports (https://caniuse.com/#search=supports)
* Does not support conditional comments
* Does not support conditional compilation (https://docs.microsoft.com/en-us/scripting/javascript/advanced/conditional-compilation-javascript)

...and...

* You may not want to use CSS hacks
* You may not want to serve the IE11 payload to other browsers
* But you do want to use things like CSS Grid

What about the repaints/flashes/performance?

Fair question; there will be some level of a hit and if that's not an acceptable tradeoff, don't use this technique. 
Really though - worrying about IE11 getting a fast/optimal experience is a bit of a waste of time at this point. 
Better it works with a flash than doesn't work at all.

What about compatibility mode?

If you still have to support that, you'll need much deeper sniffing - see 
https://stackoverflow.com/questions/27912296/ie11-detect-whether-compatibility-view-is-on-via-javascript

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.