How to Target Microsoft Edge with CSS

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?

css target IE and Microsoft Edge

Browser-specific CSS should usually be avoided, but if your really need to, you're having various possibilities. These should be the most common ones:

1. use conditional comments in the html to target specific IE-versions:
   https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

2. use css hacks by writing syntactically wrong CSS, which is (due to autocorrection) still applied in some browsers/versions.
   http://browserhacks.com/ is a quite good collection for this

3. Use JavaScript to set a CSS-Class like is-internet-explorer, which is then used in the css to target only such browsers. As userAgent evaluation is quite difficult and browsers often pretend to be another browser, you should use a JavaScript-Library for this tedious task (e.g. https://github.com/DamonOehlman/detect-browser)

4. Use some Server-Side Logic to deliver an extra CSS-Filer or set an extra class. This is basically the same as #3, but on the server side.

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

Target Edge Canary in CSS

The Microsoft Edge Canary version using chromium engine, so the @supports (-ms-ime-align: auto) can't detect it as Edge browser.

As an alternative workaround, I suggest you could use the window.navigator.UserAgent to check whether the browser is Microsoft Edge(Chromium), this is a JavaScript method.

Code as below:

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

The Browser Agent strings as below:

• The Edge browser userAgent:

  mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/64.0.3282.140 safari/537.36 edge/18.17763

• The Microsoft Chromium Edge Dev userAgent:

  mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/76.0.3800.0 safari/537.36 edg/76.0.167.1

• The Microsoft Chromium Edge Canary userAgent:

  mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/76.0.3800.0 safari/537.36 edg/76.0.167.1

• The IE browser userAgent:

  mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; rv:11.0) like gecko

• The Chrome browser userAgent:

  mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/74.0.3729.169 safari/537.36

[Note] If your site is being targeted for UA string overrides by the browser, you may not be able to use userAgent to detect the browser correctly depending on what those overrides show.

CSS class/properties targeting to IE as well as Edge

At-rules such as @media and @supports are separate rules that cannot be grouped together by their at-keywords.

That means that it's not possible to write a single rule with a single pair of curly braces that combines two different at-keywords.

For more, you could refer to this link:https://stackoverflow.com/a/22780689/10487763

---

Related Topics