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!

This is a non standard feature and probably shouldn't be used as it may react different among the various browsers. — MPaul, Aug 08 '18 at 20:09
You should not target specific browsers. Instead, write for basic implementation across all required browsers and then implement nicer/newer features for the browsers that happen to support them as a form of progressive enhancement. — TylerH, Aug 08 '18 at 21:00
calc works perfectly in every other browser. I have a grid of pictures that I want to span the entire screen. IE rounds off to a higher value and causes the last image in the row to wrap over to the next row. Such a bad browser... — agusterodin, Aug 09 '18 at 01:48

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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?

Targeting Microsoft Edge With CSS and A Certain Width

1 Answers1

UPDATE