How to Detect Ie and Edge Browsers in CSS

how to detect IE and Edge browsers in CSS?

For IE 9 and lower, load a conditional stylesheet:

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IE 10 and up doesn't support this, so you have to use media queries:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
}

For Edge 12-15:

@supports (-ms-accelerator:true) {
   /* Edge 12+ CSS */ 
}

EDIT

For Edge 16+

@supports (-ms-ime-align:auto) {
    /* Edge 16+ CSS */ 
}

How to detect in CSS if browser is IE 11 or Edge?

There is grid implementation specifically for IE10, 11 and Edge < 16. Here is how to handle both IE and Grid supporting browsers:

In your Grid you need to setup both MS grid and New grid:

.my-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 500px auto auto;
  grid-template-rows: 500px auto auto;
  -ms-grid-columns: 1fr 400px;
  grid-template-columns: 1fr 400px;
}

Then you need to use -ms vendor prefixes on each of your section as well as regular non prefixed ones. Basically you will implement two grids. If you only want to use flex on IE as you mentioned then:

.my-grid {
  display: flex;
  display: grid;
  grid-template-rows: 500px auto auto;
  grid-template-columns: 1fr 400px;
  /* since IE doesn't support display: grid; the last two lines won't matter */
}

My recommendation is:

1. Mobile first using flex
2. Grid for new grid supported in all major browsers
3. MS Grid (does not support gutters from new grid)

NOTES: Microsoft made the first grid implementation, after that other Browsers changed the Spec and after a few years made their own implementation. It took MS a few years to match the new spec on IE Edge 16. That's why there is a MS grid implementation, and a grid one.

Detecting IE version using CSS Capability/Feature Detection

So I found my own solution to this problem in the end.

After searching through Microsoft documentation I managed to find a new IE11 only style msTextCombineHorizontal

In my test, I check for IE10 styles and if they are a positive match, then I check for the IE11 only style. If I find it, then it's IE11+, if I don't, then it's IE10.

Code Example: Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)

 /**  Target IE 10 with JavaScript and CSS property detection.    # 2013 by Tim Pietrusky  # timpietrusky.com **/
 // IE 10 only CSS properties var ie10Styles = [     'msTouchAction',     'msWrapFlow',     'msWrapMargin',     'msWrapThrough',     'msOverflowStyle',     'msScrollChaining',     'msScrollLimit',     'msScrollLimitXMin',     'msScrollLimitYMin',     'msScrollLimitXMax',     'msScrollLimitYMax',     'msScrollRails',     'msScrollSnapPointsX',     'msScrollSnapPointsY',     'msScrollSnapType',     'msScrollSnapX',     'msScrollSnapY',     'msScrollTranslation',     'msFlexbox',     'msFlex',     'msFlexOrder'];
 var ie11Styles = [     'msTextCombineHorizontal'];
 /*  * Test all IE only CSS properties  */ var d = document; var b = d.body; var s = b.style; var ieVersion = null; var property;
 // Test IE10 properties for (var i = 0; i < ie10Styles.length; i++) {     property = ie10Styles[i];
     if (s[property] != undefined) {         ieVersion = "ie10";         createEl("IE10 style found: " + property);     } }
 // Test IE11 properties for (var i = 0; i < ie11Styles.length; i++) {     property = ie11Styles[i];
     if (s[property] != undefined) {         ieVersion = "ie11";         createEl("IE11 style found: " + property);     } }
 if (ieVersion) {     b.className = ieVersion;     $('#versionId').html('Version: ' + ieVersion); } else {     createEl('Not IE10 or 11.'); }
 /*  * Just a little helper to create a DOM element  */ function createEl(content) {     el = d.createElement('div');     el.innerHTML = content;     b.appendChild(el); }
 /*  * List of IE CSS stuff:  * http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx  */

body {    font: 1.25em sans-serif;}div {    background: red;    color:#fff;    padding: 1em;}.ie10 div {    background: green;    margin-bottom:.5em;}.ie11 div {    background: purple;    margin-bottom:.5em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><h1>Detect IE10 and IE11 by CSS Capability Testing</h1>

<h2 id="versionId"></h2>

How to Identify Microsoft Edge browser via CSS?

/* Microsoft Edge Browser 12-18 (All versions before Chromium) */

This one should work:

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

For more see: Browser Strangeness

Detecting browser in Edge IE mode

Ok, thank you. I also found out that Internet Options in Win 10 is in Control Panel (not exclusive to IE). It looks to be the IE options interface but in a more generalized scope (so if you have IE Mode within Edge window, these should apply). It appears that zone-specific stuff like Initialize and script ActiveX controls not marked as safe for scripting can be set here. I tested these out and they do apply to IE

How to target Microsoft Edge with CSS?

To target Edge (version < 79), we can check for -ms-ime-align support, Edge being the only Microsoft browser that supports this property:

@supports (-ms-ime-align: auto) {
  .selector {
        color: red;
  }
}

Or this one-liner (that one works on Edge and all IEs also):

_:-ms-lang(x), .selector { color: red; }

Further explanation, including variants to support specific versions of Edge, can be found in this article.

For Edge version > 78, since its rendering engine (browser engine) changed to Blink, which is the Chrome's rendering engine, it should behave like Chrome.

How to detect Safari, Chrome, IE, Firefox and Opera browsers?

Googling for browser reliable detection often results in checking the User agent string. This method is not reliable, because it's trivial to spoof this value.

I've written a method to detect browsers by duck-typing.

Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension. Use feature detection when possible.

Demo: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

How to detect IE/Edge using javascript?

You can use this custom script to detect IE/Edge:

if (/MSIE 10/i.test(navigator.userAgent)) {
   // this is internet explorer 10
   window.alert('isIE10');
}

if(/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)){
    // this is internet explorer 9 and 11
    window.location = 'pages/core/ie.htm';
}

if (/Edge\/12./i.test(navigator.userAgent)){
   // this is Microsoft Edge
   window.alert('Microsoft Edge');
}

Check out this page for the latest IE and Edge user agent strings: https://msdn.microsoft.com/en-us/library/hh869301%28v=vs.85%29.aspx

Check if user is using IE

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;
}

---

Related Topics