Check if user is using IE
It's several years later, and the Edge browser now uses Chromium as its rendering engine.
Checking for IE 11 is still a thing, sadly.
Here is a more straightforward approach, as ancient versions of IE should be gone.
if (window.document.documentMode) {
// Do IE stuff
}
Here is my old answer (2014):
In Edge the User Agent String has changed.
/**
* detect IEEdge
* returns version of IE/Edge or false, if browser is not a Microsoft browser
*/
function detectIEEdge() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
}
Sample usage:
alert('IEEdge ' + detectIEEdge());
Default string of IE 10:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
Default string of IE 11:
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
Default string of Edge 12:
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
Default string of Edge 13 (thx @DrCord):
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586
Default string of Edge 14:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/14.14300
Default string of Edge 15:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063
Default string of Edge 16:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299
Default string of Edge 17:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134
Default string of Edge 18 (Insider preview):
Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 14) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17730
Test at CodePen:
http://codepen.io/gapcode/pen/vEJNZN
Use below JavaScript method :
function msieversion()
{
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0) // If Internet Explorer, return version number
{
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
}
else // If another browser, return 0
{
alert('otherbrowser');
}
return false;
}
You may find the details on below Microsoft support site :
How to determine browser version from script
Update : (IE 11 support)
function msieversion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
}
else // If another browser, return 0
{
alert('otherbrowser');
}
return false;
}
If all you want to know is if the browser is IE or not, you can do this:
var isIE = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
if ((old_ie > -1) || (new_ie > -1)) {
isIE = true;
}
if ( isIE ) {
//IE specific code goes here
}
Update 1: A better method
I recommend this now. It is still very readable and is far less code :)
var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);
if ( isIE ) {
//IE specific code goes here
}
Thanks to JohnnyFun in the comments for the shortened answer :)
Update 2: Testing for IE in CSS
Firstly, if you can, you should use @supports
statements instead of JS for checking if a browser supports a certain CSS feature.
.element {
/* styles for all browsers */
}
@supports (display: grid) {
.element {
/* styles for browsers that support display: grid */
}
}
(Note that IE doesn't support @supports
at all and will ignore any styles placed inside an @supports
statement.)
If the issue can't be resolved with @supports
then you can do this:
// JS
var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);
if ( isIE ) {
document.documentElement.classList.add('ie')
}
/* CSS */
.element {
/* styles that apply everywhere */
}
.ie .element {
/* styles that only apply in IE */
}
(Note: classList
is relatively new to JS and I think, out of the IE browsers, it only works in IE11. Possibly also IE10.)
If you are using SCSS (Sass) in your project, this can be simplified to:
/* SCSS (Sass) */
.element {
/* styles that apply everywhere */
.ie & {
/* styles that only apply in IE */
}
}
Update 3: Adding Microsoft Edge (not recommended)
If you also want to add Microsoft Edge into the list, you can do the following. However I do not recommend it as Edge is a much more competent browser than IE.
var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident|Edge\//.test(ua);
if ( isIE ) {
//IE & Edge specific code goes here
}