How to Identify Microsoft Edge Browser via CSS

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

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.

Targeting Microsoft Edge With CSS and A Certain Width

Edge just recently switched to a Chromium based browser (in 2019) and will now behavior much more as expected. The calc() function now rounds decimals properly, which will save a lot of headache in the future. That being said, you still will need target older version for the next couple of years, for people who don't update the browsers as often.

Use this to target IE10/Edge+ pre-chromium base with widths set:

@media all and (-ms-high-contrast: none) and (min-width : 1700px),
(-ms-high-contrast: active) and (min-width : 1700px) {
}

Another option is to use JavasScript to add classes.

The example below is old... will update once I can find another older PC to test on some more... the switch to chrome is making me update some of my code as well.

navigator.browser=function(){var e=navigator.appName;var t=navigator.userAgent;var n;var r=t.match(/(edge|opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);if(r&&(n=t.match(/version\/([\.\d]+)/i))!=null){r[2]=n[1]}if(r){r={name:r[1].toLowerCase(),versionExt:r[2]}}else{r={name:e.toLowerCase(),versionExt:navigator.appVersion}}var i=r.versionExt.split(".");r.version=parseInt(i[0]);if(typeof i[1]=="string"&&i[1].match(/^[\d]+$/i)!=null){r.sub=parseInt(i[1]);r.subversion=parseFloat(r.version+"."+r.sub)}return r}()
$(document).ready(function(){
    if (/edge/i.test(navigator.userAgent)) {
      var ua = navigator.userAgent.toLowerCase();
      var pos = ua.indexOf('edge/');
      var version = ua.substr(pos + 5);
      var parts = version.split(".");
      var mainVersion = parts[0];
      $('html').addClass('edge');
      $('html').addClass('edge-' + mainVersion);
      if (navigator.browser.name == 'netscape') {
        $('html').addClass('edge-pre-chromium');
      }
      else {
        $('html').addClass('edge-chromium');
      }
    }       
    else if (/windows/i.test(navigator.userAgent) && navigator.browser.name == 'netscape') {
      $('html').addClass('edge');
      $('html').addClass('edge-pre-chromium');
    }       
});

Hope that helps. I know this is a bit old, but hopefully can help some others in the future.

UPDATE

The calc() function is still rounding up in the Chromium version, sadly. The JavaScript above seems to be detecting the different version correctly.

Pure CSS target of IE12+.

@media only screen and (min-width : 1700px) {
  _:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }
}

Credit for the above goes to: How to Identify Microsoft Edge browser via 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 */ 
}

CSS: How to detect the OLD Edge BUT NOT THE NEW Edge Chromium?

The new Edge is Chromium-based so it's like Chrome. You can still use that CSS rule to target Edge Legacy and it won't affect Edge Chromium.

I made a simple sample like this:

@supports (-ms-ime-align:auto) {  #aaa {    background-color: yellow  }}

<div style="width:200px; height:200px" id="aaa">  aaa</div>

<!doctype html><html><head><style>@supports (-ms-ime-align:auto) {    h1{        color: red;    }}</style></head><body><h1>This is my sample text...</h1></body></html>

<!doctype html><html><head><title>Test demo</title></head><body><script>    var browser = (function (agent) {        switch (true) {            case agent.indexOf("edge") > -1: return "MS Edge (EdgeHtml)";            case agent.indexOf("edg") > -1: return "MS Edge Chromium";            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";            case agent.indexOf("trident") > -1: return "Internet Explorer";            case agent.indexOf("firefox") > -1: return "firefox";            case agent.indexOf("safari") > -1: return "safari";            default: return "other";        }    })(window.navigator.userAgent.toLowerCase());    document.body.innerHTML =  "This is " + browser + " browser." + "<br><br>" + window.navigator.userAgent.toLowerCase();</script></body></html>

<script>
    var browser = (function (agent) {
        switch (true) {
            case agent.indexOf("edge") > -1: return "edge";
            case agent.indexOf("edg") > -1: return "chromium based edge (dev or canary)";
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "ie";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());
    document.body.innerHTML = window.navigator.userAgent.toLowerCase() + "<br>" + browser;
</script>