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.
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>