Targeting Microsoft Edge With CSS and A Certain Width

Question

How do you target Microsoft Edge whilst also targeting a width through media query?

I tried nesting:

@media (min-width:1700px) {
    @supports (-ms-ime-align: auto) {
       .grid-image {
           width: calc(100% / 7);
       }​
   }
}

and some other weird stuff like

@media (min-width:1700px) and (-ms-ime-align: auto) {
    .grid-image {
        width: calc(100% / 7);
    }​
}

and nothing works. Help is much appreciated!

Answer 1

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?