Skip to content

Instantly share code, notes, and snippets.

@mgol

mgol/ie11-only.md

Last active May 11, 2023 15:50
Show Gist options
  • Save mgol/560a942d25ee8ab18349 to your computer and use it in GitHub Desktop.
Save mgol/560a942d25ee8ab18349 to your computer and use it in GitHub Desktop.
Download ZIP
How to easily not serve JS and/or CSS to IE<11
Raw
ie11-only.md

Here's how to make your site not load CSS and/or JS in IE older than 11:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=8,9,11">
        <title>Page title</title>
        <!--[if !IE]>-->
        <link rel="stylesheet" href="styles.css">
        <!--<![endif]-->
    </head>
    <body>
        CONTENT
        <!--[if !IE]>-->
        <script src="scripts.js"></script>
        <!--<![endif]-->
    </body>
</html>

Why?

Starting from January 12, 2016 only IE 11 is supported in Windows 7 or newer; older versions should die quickly. If your site has readable static content, you may reduce the testing burden by not sending JS (and maybe even CSS - your choice) to versions older than 11.

How?

IE reads the X-UA-Compatible meta tag and tries to apply each setting from left to right. This e.g. means IE 8 will understand the IE=8 part but will drop IE=9 and IE=11. As a result, all IE from 8 to 11 will get their most standards-compliant document mode except IE 10 which will get the IE 9 mode. That should be OK, though, as we're not loading JS & CSS.

Why conditional comments?

One way to not run JS in older browsers is to start the JS file with something like:

(function () {
    'use strict';
    if (typeof Map !== 'function') {
        return;
    }
    /* code */
})();

However, this still makes old IE download the JS file that it doesn't need.

Another way would be to load JS and/or CSS via a small JS script that does the above detection. That puts modern browsers at a disadvantage, though - they try to prefetch scripts as quickly as possible but they can't see them from the start if they're loaded dynamically.

Using conditional comments alleviates both those problems.

Why not IE=edge?

The IE=8,9,11 value will make IE 8 or newer run in one of the three modes: IE 8, IE 9 or IE 11 mode. That would have been problematic a few months ago but now we know there will be no IE 12 and Microsoft Edge ignores the X-UA-Compatible meta tag so such a value is safe.

IE 10 by default ignores conditional comments so forcing it to IE 9 mode is necessary to restore this hack.

In a few years when you want to skip JS/CSS in IE 11 as well, all that's needed is to change the value from IE=8,9,11 to IE=8,9.

@My1
Copy link

My1 commented Jul 22, 2019

I am actually trying the opposite to have IE load a specific script, while having normal browsers ignore it and I use a variation like this:

<!--[if IE]>
<script src="scripts.js"></script>
<![endif]-->

but it sadly doesnt work in IE11 with <meta http-equiv="X-UA-Compatible" content="IE=8,9"> and even just with 8.

@mgol
Copy link
Author

mgol commented Jul 22, 2019 •
edited
Loading

@My1 if you want a script to only load in legacy browsers, you can add a nomodule attribute to it without using conditional comments:

<script nomodule src="scripts.js"></script>

This will load not only in IE but also in other browsers that don't implement <script type="module"> (and Safari 10.1 who implements module scripts but also loads nomodule scripts) but all current versions of non-IE browsers ignore nomodule scripts so this is often enough.

See https://caniuse.com/#feat=es6-module.

@mgol
Copy link
Author

mgol commented Jul 22, 2019 •
edited
Loading

@My1 BTW, I've just checked and having:

<meta http-equiv="X-UA-Compatible" content="IE=8,9">

does make IE 11 execute scripts like:

<!--[if IE]>
<script src="scripts.js"></script>
<![endif]-->

Something else in your setup must be interfering.

@My1
Copy link

My1 commented Jul 22, 2019 •
edited
Loading

weird. I didnt get it to load, in the end I just said screw it and made the insert with PHP, as long as it works, even better as it doesnt even put it in as a comment on non-IEs.

maybe IE behaves differently based on OS, no Idea, I use win 8.1 here.

I also made it into an existing site (which already is littered with conditional comments) maybe it works better when I have a more pure test site to work with.

the module Idea is interesting although I was injecting https://github.com/Keyamoon/svgxuse specifically to cope with IE (re-using parts of existing SVGs can save some relatively heavy data if the svg is big) because IE 9-11 totally fails it (<=8 doesnt even SVG in the first place but no matter)

but that is just optimization, having a site that looks (in my opinion) nice on modern browsers but still can fully display all the info (while being ugly but who cares) in IE5 mode. I think not many can say that, lol (but it IS a LOT easier when the site just displays relatively simple information)

@mgol
Copy link
Author

mgol commented Jul 23, 2019

maybe IE behaves differently based on OS, no Idea, I use win 8.1 here.

The behavior is the same across OSes.

@methodbox
Copy link

methodbox commented Jan 13, 2020 •
edited
Loading

This no longer appears to work in IE 11. Suggestions?

I'm using the following in the head:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8,9,11">
<title>Page title</title>
<!--[if !IE]>-->
<script src="script.js"></script>
<!--<![endif]-->

@mgol
Copy link
Author

mgol commented Jan 13, 2020

@methodbox this technique is specifically meant to make JS/CSS invoked, not skipped in IE 11 but only skipped in older versions. Also, see the last paragraph:

In a few years when you want to skip JS/CSS in IE 11 as well, all that's needed is to change the value from IE=8,9,11 to IE=8,9.

@methodbox
Copy link

@mgol I see, so I just need to leave the 11 out of the meta tag. Thanks for clarifying!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment