Check if user is using IE

Precise IE detection

Let's face it, detecting IE has its potholes. And by potholes, I mean compatibility modes and deceiving user agents. To tackle this, we've got the steadfast document.documentMode, an IE-only property:

function detectIE() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf('MSIE ');
  var trident = ua.indexOf('Trident/');

  if (msie > 0 || trident > 0) {
    // It's raining IE, hallelujah! It's raining IE, amen!
    return true;
  }

  return false; // Sorry, it's a no-show for IE here.
}


Tailor web content for IE

So, you're going the extra mile for your IE users. Fancy! We can enhance their visit by customising functionality and design. Add an 'ie' class to the HTML element allowing for specific styles:

if (detectIE()) {
  document.documentElement.classList.add('ie'); // Welcome, IE users! This party is just for you.
}


With your SCSS or CSS:

.ie {
  // IE users, your bespoke styles live here.
}


For functional delighters, use conditional statements to orchestrate IE-only scripts:

if (detectIE()) {
  // IE-only feats and magic tricks go here.
}


A pro tip—IE doesn’t understand @supports, so you'll need to draft fallbacks:

@supports (display: grid) {
  /* Agents of the modern world, enroll here! */
} else {
  /* For our lovely IE users, fallback styles coming your way! */
}


Going beyond IE detection

Browser detection with navigator.userAgent is just the trailer. For a deep dive, consider feature detection libraries like Modernizr. Offering a detailed lowdown on the browser's abilities, they're unmissable for rock-solid, cross-browser applications.

Oh, did you hear? Edge switched teams to Chromium. Keep your fingers on the pulse—check the Microsoft support page for updates on user agents and the browser story.

Mastering responsive design for IE

When catering to IE users, you'll often encounter hurdles due to the inadequate CSS support in IE:

• Flexbox: The IE10 and IE11 implementation isn't standard. You'll have to dial in some prefixes.
• Media Queries: IE9 doesn't understand media queries; write a separate stylesheet for IE9 on down.
• Gradients: IE9 is supportive, but the syntax differs from the CSS standard.

Apply the principle of progressive enhancement so that your site, though unsophisticated in IE, remains operable and affords a good user experience.