Serve alternative CSS for IE11 and below using JavaScript?

Question

There's lots of examples on Stackoverflow on how to detect IE11, but I'm not sure how to use it in a JavaScript conditional statement.

I'm using Tailwind CSS, but it doesn't support IE11 and below. I'd like a way to at least provide some kind of layout via an alternative CSS files.

How would I do something like this with JavaScript?

if (IE11) {
    <link rel="stylesheet" href="/css/ie11.css">
  } else if (IE10) {
     <link rel="stylesheet" href="/css/ie10.css">
  } else if (IE9) {
    <link rel="stylesheet" href="/css/ie9.css">
  } else if (IE8) { {
    <link rel="stylesheet" href="/css/ie8.css">
  } else {
    <link rel="stylesheet" href="/css/tailwind.css">
  }
}

I appreciate global IE11 usage is very low, but I'd like to be able to make use of Tailwind CSS and offer the option of supporting older browsers if needed.

Why are you not satisfied with the question you've linked to? — VLAZ
– VLAZ, Commented Jan 27, 2022 at 16:37
I can't see how I'd adapt it, so it works as per my example. — StephenMeehan
– StephenMeehan, Commented Jan 27, 2022 at 18:47
I guess the first thing is that you're mixing HTML code with JS code. You cannot do that. Because they aren't the same thing. You should really focus on one - do you JS? Then add the stylesheets with JS. Do you want to have HTML tags in normal HTML code? Then you should probably use HTML and CSS only. — VLAZ
– VLAZ, Commented Jan 27, 2022 at 18:57
Thanks, I think this might be a better solution. getbutterfly.com/… — StephenMeehan
– StephenMeehan, Commented Jan 27, 2022 at 19:33

Xudong Peng · Accepted Answer · 2022-01-28 03:40:26Z

0

You can use window.document.documentMode to determine if the current browser is IE. Then dynamically import resources into the page.

Simple code:

<script>
        var ieVersion = window.document.documentMode;
        if (ieVersion != 'undefined' & ieVersion > 7 && ieVersion < 12) {
            console.log('Load in IE ' + ieVersion);
            importJsResource(ieVersion);
        } else {
            console.log('Not in IE 8-11..');
            ieVersion = "tailwind";
            importJsResource(ieVersion);
        }

        function importJsResource(version) {
            var fileref = document.createElement("link");
            fileref.rel = "stylesheet";
            fileref.type = "text/css";
            if (ieVersion == 'tailwind') {
                fileref.href = "/Content/tailwind.css";
            } else {
                fileref.href = "/Content/ie" + version + ".css";
            }
            document.getElementsByTagName("head")[0].appendChild(fileref);
        }
    </script>

answered Jan 28, 2022 at 3:40

Xudong Peng

2,4911 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StephenMeehan Over a year ago

This is great, many thanks.

Collectives™ on Stack Overflow

Serve alternative CSS for IE11 and below using JavaScript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related