<!-- Simpler but applies to both IE10 and IE11 --><script>(function(){varuamatch=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(){varua=navigator.userAgent;varuamatch=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)
HTTPSSSH
You can clone a snippet to your computer for local editing.
Learn more.