Hay muchos ejemplos en Stackoverflow sobre cómo detectar IE11, pero no estoy seguro de cómo usarlo en una declaración condicional de JavaScript.
Estoy usando Tailwind CSS, pero no es compatible con IE11 y versiones anteriores. Me gustaría una forma de al menos proporcionar algún tipo de diseño a través de archivos CSS alternativos.
¿Cómo haría algo como esto con 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"> } }Aprecio que el uso global de IE11 sea muy bajo, pero me gustaría poder usar Tailwind CSS y ofrecer la opción de admitir navegadores más antiguos si es necesario.
Puede usar window.document.documentMode para determinar si el navegador actual es IE. A continuación, importe dinámicamente los recursos a la página.
Código sencillo:
<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>