Handling Internet Explorer users

Goals

  1. Render or redirect to unsupported browser page in IE (example)
  2. Open the requested URL in Microsoft Edge (if available)

Reasons

Supporting modern browser features in Internet Explorer in terms of

  • Javascript is possible using polyfill. However, it increases Javascript file sizes to all users, including those using the latest modern web browsers.
  • CSS is impossible. Many libraries ditched IE support in the latest versions.

In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11.

Source: Browser Support, Tailwind CSS v3.0

Internet Explorer is not supported. If you require Internet Explorer support, please use Bootstrap v4.

Source: Browsers and devices, Bootstrap v5.0

Internet Explorer (10+) is only partially supported.

Source: Browser Support, Bulma

Methods

All code examples are client side HTML codes.

Unsupported browser page

  • Render the page from the server
  • Redirect to the page from the client
<!-- Add to template (e.g. app.html in SvelteKit) --><head>
<script>
// Check if browser is IE using the user agent value
if (/MSIE|Trident/.test(window.navigator.userAgent)) {
// Redirect to an unsupported browser page that supports IE
window.location.href = 'path-to-html-file.html';
}
</script>
</head>

Open link in Microsoft Edge

  • Redirect to the page from the client

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hyunbin

Hyunbin

Node.js and web developer using TypeScript. Undergraduate in Seoul National University.